html - 交通灯的 CSS 形状

Question

我在这里苦苦挣扎，我是 CSS 的新手，不知道这里的这些形状出了什么问题。我试图让圆圈位于正方形之上。我正在做一些研究并尝试尽可能多地学习我的控制评估，我知道你可以使用图像但我只是检查我的所有选项我做错了什么？

.circle {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  background-color: black;
  position: absolute;
  z-index: 2;
}
.circle0 {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  background-color: black;
  position: absolute;
  z-index: 3;
  top: 27%;
}
.circle1 {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  background-color: black;
  position: absolute;
  z-index: 4;
  top: 54%;
}
.square {
  width: 200px;
  height: 600px;
  background-color: white;
  position: absolute;
  border-style: solid;
  border-color: black;
  z-index: 1;
}

<div class="square"></div>
<div class="circle"></div>
<div class="circle0"></div>
<div class="circle1"></div>

Answer 1

您需要将 .square div 包裹在 3 个圆形 div 周围:

<div class="square">
  <div class="circle"></div>
  <div class="circle0"></div>
  <div class="circle1"></div>
</div>

Fiddle