如何利用z-index实现子元素覆盖父元素？z-index失效原因分析

这个问题的核心是堆叠上下文在flex布局中的特殊表现，我来帮你拆解清楚：

问题根源：flex子元素自动创建了堆叠上下文 #

你的父元素#bronze是.second-container（一个flex容器）的直接子元素，而flex布局有个容易被忽略的规则：flex容器的直接子元素（flex item）只要设置了z-index属性（哪怕没有设置position），就会自动创建一个独立的堆叠上下文。

在你的代码里，.second-container>div（也就是#bronze）设置了z-index:3，这就触发了堆叠上下文的创建。一旦父元素创建了堆叠上下文，它的所有子元素（比如你的.price-container）的z-index只能在这个上下文内部生效——简单说就是，子元素的层级永远不可能超出父元素的堆叠层级，哪怕你给子元素设置z-index:999也没用。

另外补充一点：你的子元素设置z-index:0其实是默认行为（relative定位元素的z-index默认是auto，设为0效果一致），这并不是问题的关键，核心还是父元素的堆叠上下文限制。

解决方案 #

根据你的需求，有两种可行的修改方式：

方案1：移除父元素的z-index（最简单） #

如果你不需要#bronze和其他兄弟元素有层级区分，直接去掉.second-container>div的z-index:3即可。这样父元素就不会创建堆叠上下文，子元素的层级就能相对于更高层的上下文生效，自然就能覆盖父元素（其实默认情况下子元素就会在父元素的内容层上方，去掉父元素的z-index后，子元素超出父元素的部分也能正常显示）。

修改后的CSS片段：

.second-container>div { 
  width: 200px; 
  height: 200px; 
  margin: 3rem; 
  background-size: 150px, 150px; 
  background-repeat: no-repeat; 
  background-position: center; 
  /* z-index: 3; 删除这一行 */
}

方案2：将子元素改为兄弟元素（保留父元素z-index） #

如果你必须保留#bronze的z-index:3（比如要和其他兄弟元素区分层级），那可以把.price-container从#bronze内部移出来，作为.second-container的子元素（和#bronze同级），然后用绝对定位来调整位置，再通过更高的z-index实现覆盖。

修改后的HTML：

<div class="flex-container">
  <div class="second-container">
    <div id="bronze"></div>
    <div class="price-container" id="bronze-price"></div>
  </div>
</div>

对应的CSS修改：

.second-container>div { 
  width: 200px; 
  height: 200px; 
  margin: 3rem; 
  background-size: 150px, 150px; 
  background-repeat: no-repeat; 
  background-position: center; 
  z-index: 3; 
  position: relative; /* 加上position，确保z-index在非flex场景下也生效 */
}
.price-container { 
  height: 40px; 
  width: 200px; 
  border-radius: 8px; 
  position: absolute; 
  top: calc(3rem + 12rem); /* 对应原来的top位置，3rem是父元素的margin */
  left: 3rem;
  z-index: 4; /* 设置比#bronze更高的z-index */
}

总结 #

flex布局的堆叠上下文规则很容易踩坑，记住：flex item的z-index不需要position就能生效，而且会创建独立的堆叠上下文，子元素无法突破这个上下文的层级限制。根据你的实际需求选择上面的方案就能解决问题啦！

内容的提问来源于stack exchange，提问作者Tomáš Nosek