如何实现外层div覆盖内层div？蓝色div覆盖黄色div问题求助

问题根源 #

1. 内层元素.c2未设置定位属性（默认position: static），导致top/left/width/height完全无效，仅作为普通块级元素存在于父元素内容区域。
2. 父元素的z-index仅控制其与同级元素的层级关系，无法覆盖自身的子元素——子元素默认处于父元素内容层之上，父元素的背景始终在子元素下方。

解决方案 #

方法一：通过父元素伪元素实现视觉覆盖

利用父元素的::after伪元素创建一个与父元素尺寸一致的蓝色覆盖层，层级高于子元素：

.c1{
  padding:25px;
  position: relative; /* 作为伪元素的定位上下文 */
}
.c1::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: blue;
  z-index: 10; /* 层级高于子元素 */
}
.c2{
  position: relative;
  z-index: 1;
  background: yellow;
}

<div class="container">
  <div class="c1">
    <div class="c2">
      Hallo Welt
    </div>
  </div>
</div>

方法二：将子元素置于父元素背景之下

给子元素设置相对定位并将z-index设为负值，使其层级低于父元素背景：

.c1{
  padding:25px;
  background: blue;
  position: relative;
}
.c2{
  position: relative;
  z-index: -1; /* 层级低于父元素背景 */
  background: yellow;
}

<div class="container">
  <div class="c1">
    <div class="c2">
      Hallo Welt
    </div>
  </div>
</div>

说明 #

• 方法一的优势是子元素的交互事件（如点击）不会被阻断，仅做视觉覆盖；
• 方法二更简洁，但子元素会被父元素背景完全遮挡，无法触发交互。

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