有没有办法优化 4 div 定位？答案

【问题标题】：Is there a way to optimize 4 div possitioning?有没有办法优化 4 div 定位？
【发布时间】：2023-01-16 20:35:34
【问题描述】：

我正在尝试定位 4 个 div，以仅使用 CSS 在图像上获得结果。

有没有办法获得相同的结果，但 CSS 更优化？

body {
  margin: 0px;
  padding: 0px;
  background: #6592CF;
}

.box {
  width: 300px;
  height: 150px;
  background: #dd6b4d;
  margin-top: 75px;
  margin-left: 50px;
  position: absolute;
  background: #243D83;
  z-index: 1;
}

.out {
  background: #6592CF;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  margin-top: 25px;
  margin-left: 75px;
  position: absolute;
  z-index: 2;
}

.blue {
  background: #243D83;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-top: 75px;
  margin-left: 125px;
  position: absolute;
  z-index: 3;
}

.yellow {
  background: #EEB850;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-top: 125px;
  margin-left: 175px;
  position: absolute;
  z-index: 4;
}

<div class="box"></div>
<div class="out"></div>
<div class="blue"></div>
<div class="yellow"></div>

尝试使用 :before :after 选择器但没有得到相同的结果

【问题讨论】：

“优化”是什么意思，如何衡量最佳？

标签： css

【解决方案1】：

我会为所有圈子上一堂课，但这并没有太大的不同。

body {
  margin: 0px;
  padding: 0px;
  background: #6592CF;
}

.box {
  width: 300px;
  height: 150px;
  background: #dd6b4d;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  background: #243D83;
  z-index: 1;
}

.circle {
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.out {
  background: #6592CF;
  width: 250px;
  height: 250px;
  z-index: 2;
}

.blue {
  background: #243D83;
  width: 150px;
  height: 150px;
  z-index: 3;
}

.yellow {
  background: #EEB850;
  width: 50px;
  height: 50px;
  z-index: 4;
}

<div class="box"></div>
<div class="circle out"></div>
<div class="circle blue"></div>
<div class="circle yellow"></div>

【讨论】：