带背景色的重叠div问题：上层div透显下层内容

嘿，我来帮你搞定这个重叠div透显下层内容的问题～

你遇到的情况是，虽然后添加的div在位置上重叠到了第一个div上面，但却能透过它看到下层的内容。这其实是因为浏览器默认的堆叠规则有时候会出现渲染歧义，咱们可以通过几个简单的CSS调整来解决：

方案1：给上层div创建堆叠上下文（最推荐） #

给.overlapping类添加position: relative和z-index，明确它的层级高于下层div，这样就能确保完全遮挡：

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

方案2：明确指定上层div的背景色 #

虽然你已经用全局div选择器设置了背景色，但有时候单独给上层div重复设置背景色，可以消除浏览器的渲染歧义，确保背景完全覆盖：

.overlapping {
  margin-left: 50px;
  margin-top: -50px;
  border: 1px solid white;
  background-color: lightblue; /* 明确设置背景色 */
}

方案3：强制设置不透明度（兜底方案） #

如果上面两种方法都没效果，可以试试给上层div设置opacity: 1，强制浏览器将它渲染为完全不透明：

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

给你贴一下调整后的完整代码，直接用就能看到效果：

完整CSS代码 #

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;
  z-index: 1;
}

完整HTML代码 #

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

内容的提问来源于stack exchange，提问作者Jost