如何让position: relative元素的z-index生效并覆盖上层元素？

你遇到的问题核心是**#body元素设置了position:absolute和z-index:0，形成了独立的堆叠上下文**——子元素的z-index值仅在父元素的堆叠上下文内生效，无法突破父元素的层级限制。哪怕给#child_above设z-index:3，它也只是在#body的上下文里层级最高，但#body本身的堆叠层级（z-index:0）低于#header的z-index:2，所以子元素永远盖不过#header。

最优解决方法：移除#body的z-index属性 #

只要去掉#body的z-index:0，它就不会创建独立的堆叠上下文，子元素的z-index就能直接和#header的层级对比：

• #child_above设z-index:3，比#header的2高，即可覆盖在header上方
• #child_below设z-index:1，比#header的2低，就会处于header下方

修改后的CSS代码：

#header {
position: absolute;
left: 50px;
height: 50px;
width: 200px;
background-color: rgba(211,141,154,1);
z-index: 2;
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 1);
}

#body {
position: absolute;
top: 55px;
height: 50px;
width: 300px;
background-color: rgba(250,250,250,1);
/* 移除z-index:0，取消独立堆叠上下文 */
}
#child_below {
position: relative;
float: left;
left: 70px;
top: 0px;
height: 50px;
width: 50px;
background-color: rgba(160,210,250,1);
z-index: 1;
margin-right: 10px;
}
#child_above {
position: relative;
float: left;
left: 100px;
top: 0px;
height: 50px;
width: 50px;
background-color: rgba(160,210,250,1);
z-index: 3;
}

HTML代码无需修改：

<div id="header">header</div>
<div id="body">
  <div id="child_below">child below</div>
  <div id="child_above">child above</div>
</div>

备选方案（保留#body的z-index时） #

如果必须保留#body的z-index，可调整#header的层级低于#body：

• 把#header的z-index设为-1，#body保持z-index:0
• #child_above设z-index:1，即可在#header上方显示
  这种方法需注意避免影响页面其他元素的层级关系，仅在特殊场景下使用。

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