z-index层级异常求助：元素未按设定值显示在顶层（含代码示例）

嘿，我来帮你搞定这个z-index的坑！你遇到的两个问题本质上是同一个核心原因——z-index只对设置了非static定位（比如relative、absolute、fixed、sticky）的元素生效，而且还要注意父元素的堆叠上下文会不会限制子元素的层级表现。

先说说问题1的核心原因 #

z-index值为9的Div显示在z-index为1的元素下方，大概率是因为这个z-index=9的Div没有设置非static的定位属性（默认是position: static），导致z-index完全不起作用；或者它的父元素处于更低的堆叠上下文里，子元素的z-index无法突破父层的层级限制。

再看问题2：你的

和标签为啥被背景层压在下面？ #

结合你贴的代码分析：
那个半透明黑色背景层（<div style="background-color: rgba(0,0,0,0.5); position: absolute;..."></div>）设置了position: absolute，会自动创建自己的堆叠上下文；而你的<h4>和<a>标签默认是position: static，哪怕给<a>加了z-index:9也没用——static定位的元素根本不支持z-index属性。而且它们的父元素（比如.display-table-cell）也是static定位，没法帮子元素提升层级来覆盖那个绝对定位的背景层。

具体修复步骤（附修改后的代码） #

1. 给需要提升层级的<h4>和<a>添加position: relative，让z-index属性生效
2. 给黑色背景层明确设置一个较低的z-index值（比如1），确保文本和按钮的z-index比它高
3. 给最外层的背景图片容器（.col-md-12）添加position: relative，让内部绝对定位的背景层相对于它定位，避免布局混乱

修改后的代码示例：

<section class="no-padding main-slider mobile-height wow fadeIn"> 
<div class="swiper-full-screen swiper-container height-100 width-100 white-move"> 
<div class="swiper-wrapper"> 
<div class="swiper-slide equalize xs-equalize-auto"> 
<div class="col-md-12 col-sm-12 col-xs-12" style="background-image:url('img/bg1.jpg'); background-size: cover; position: relative;"> <!-- 新增position:relative，作为绝对定位元素的参考父级 -->
<div style="background-color: rgba(0, 0, 0, 0.5); position: absolute; height: 100%; width: 100%; z-index: 1;"></div> <!-- 明确设置z-index:1 -->
<div class="display-table width-100 height-100"> 
<div class="display-table-cell vertical-align-middle text-left padding-twelve-all xs-padding-five-all xs-padding-90px-top"> 
<h4 class="text-swipe-title text-white margin-auto alt-font font-weight-600 letter-spacing-minus-1" style="position: relative; z-index: 10;">TEXT</h4> <!-- 新增position:relative + z-index:10 -->
<a href="#itin" style="position: relative; z-index: 10;" class="btn btn-small btn-rounded btn-secondary margin-50px-top xs-margin-20px-top">TEXT</a> <!-- 补充position:relative，z-index保持9或设10都可以 -->
</div> 
</div> 
</div> 
</div>

额外注意点 #

• z-index的层级对比只在同一个堆叠上下文里有效，所以要确保你的文本、按钮和黑色背景层处于同一个父级的堆叠上下文之下
• 如果父元素设置了transform、opacity<1、filter等属性，也会自动创建堆叠上下文，可能导致子元素的z-index无法突破父层限制，遇到这种情况要检查父元素的样式

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