具有不透明背景的重叠 div [重复]答案

【问题标题】：Overlapping divs with opaque background [duplicate]具有不透明背景的重叠 div [重复]
【发布时间】：2019-10-31 00:29:16
【问题描述】：

我有两个带有背景颜色的divs，一个与另一个重叠。问题是我可以通过顶部div看到底层div的内容。

https://jsfiddle.net/jost_s/0dxwtbvn/23/

div {
  background-color: lightblue;
  width: 100px;
  height: 100px;
  font-size: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlapping {
  margin-left: 50px;
  margin-top: -50px;
  border: 1px solid white;
}

<div>AB</div>
<div class="overlapping">CD</div>

【问题讨论】：

使用 position:relative 所以它是在前面绘制。如果还定位了其他内容，也使用 z-index jsfiddle.net/c57z6n84
请在您的问题中发布您的代码，而不是在第三方网站上。
@j08691 好的，完成
@j08691 同意，这是重复的，可以关闭。

标签： html css

【解决方案1】：

使用position: relative

div {
  background-color: lightblue;
  width: 100px;
  height: 100px;
  font-size: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlapping {
  margin-left: 50px;
  margin-top: -50px;
  border: 1px solid white;
  position:relative;
}

<div>
AB
</div>
<div class="overlapping">
CD
</div>

【讨论】：

为什么？虽然这似乎可以解决问题，但为什么会这样？
是的，我也想知道。

【解决方案2】：

如果没有 position 属性，它们在浏览器呈现它们的方式的上下文中并没有真正重叠。

对于为什么第二个块与第一个块重叠的原因可能有更好的解释，但不是它的内容，但我确信它涉及对渲染引擎如何工作的深入理解。您甚至可能在不同的浏览器中得到不同的结果。

要获得想要的效果，请定位重叠块而不是使用边距...

div {
  background-color: lightblue;
  width: 100px;
  height: 100px;
  font-size: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlapping {
  position: relative;
  top: -50px;
  left: 50px;
  border: 1px solid white;
}

<div>
  AB
</div>
<div class="overlapping">
  CD
</div>

【讨论】：

不是很深入的理解，但需要找到它在规范中定义的位置，这很棘手。完整的细节在这里：stackoverflow.com/q/48731110/8620333
@TemaniAfif 我们对什么是深度理解的定义存在显着差异? 您的链接问题显然经过了充分研究，但您仍然必须推测为什么会发生这种情况。最佳答案（在我的屏幕上阅读 6 个整页长度）以警告开头：“阅读以下信息会影响您的心理健康。” （获得赏金，但不接受答案？？）。
我没有接受任何答案，因为我没有得到我正在等待的答案.. 最佳答案给了我定义的位置，但我仍在寻找 为什么 它是这样定义的。这种非直觉选择的原因是什么。我自己给出了答案，但也像其他答案一样基于我自己的想法。

【解决方案3】：

我会使用transform: translate(); 来定位元素而不是边距。由于它触发了堆叠上下文并确保元素以正确的方式“堆叠”。

我无法真正解释为什么 margin 会这样，但也许有人想教育我。

div {
  background-color: lightblue;
  width: 100px;
  height: 100px;
  font-size: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlapping {
  border: 1px solid white;
  transform: translate(50px, -50px);
}

<div>
  <p>
    AB
  </p>

</div>
<div class="overlapping">
  <p>
    CD
  </p>
</div>

【讨论】：

两种解决方案都有效，position: relative 和 transform。我接受了这个答案，因为它涉及的更改较少。