如果所有这些都失败了，请在HTML中查找语法错误。这不是直观的，但我看到它是z指数不起作用的原因。

下面的代码有无效的HTML语法:

<div class="over"/>
<div class="under"/>

.．.(这是无效的语法，因为div不是一个自关闭标签)。

应用于这些流氓HTML元素的CSS属性，如background-color: black、position: fixed、width: 150px和top:150px，都能正常工作。然而，z-index: 2属性在完全相同的条件下并不适用。

只有当无效的HTML被修复时，z-index才能正常工作。

我不确定为什么z-index比其他CSS属性更挑剔，但也许这个答案可以帮助到一些人。

z指数需要这些来工作:

位置:相对，绝对，固定，.. 确保父元素没有溢出:hidden;

我在z指数上也遇到过同样的问题 不管你信不信，只要设置背景色就能解决问题

像这样

背景颜色:白色;

如果你将position设置为其他值而不是static，但元素的z-index仍然不起作用，这可能是某些父元素设置了z-index。

堆叠上下文具有层次结构，每个堆叠上下文都按照父堆栈上下文的堆叠顺序考虑。

下面是html

Div{边界:2px固体#000;宽度:100 px;高度:30 px;保证金:10 px;位置:相对;background - color: # FFF;｝ #el3 {background-color: #F0F;宽度:100 px;高度:60 px;前:-50像素;｝ <div id="el1" style="z-index: 5"></div> . <div id="el2" style="z-index: 3"> <div id="el3" style="z-index: 8"></div> . < / div >

不管el3的z指数有多大，它总是在el1下面，因为它的父结点有更低的堆叠上下文。你可以把堆叠顺序想象成el3的堆叠顺序实际上是3.8，低于5。

如果你想检查父元素的堆叠上下文，你可以使用这个:

var el = document.getElementById("#yourElement"); // or use $0 in chrome;
do {
    var styles = window.getComputedStyle(el);
    console.log(styles.zIndex, el);
} while(el.parentElement && (el = el.parentElement));

有一篇关于在MDN上叠加上下文的很棒的文章

z-index属性只适用于具有非静态位置值的元素(例如，position: absolute;， position: relative;，或position: fixed)。

还有位置:粘;它在Firefox中得到支持，在Safari中有前缀，在较旧版本的Chrome中使用了自定义标记，微软正在考虑将其添加到Edge浏览器中。

确保您想要使用z-index控制的元素没有具有z-index属性的父元素，因为元素由于其父元素的z-index级别而处于较低的堆叠上下环境中。

这里有一个例子:

<section class="content">            
    <div class="modal"></div>
</section>

<div class="side-tab"></div>

// CSS //
.content {
    position: relative;
    z-index: 1;
}

.modal {
    position: fixed;
    z-index: 100;
}

.side-tab {
    position: fixed;
    z-index: 5;
}

在上面的例子中，模态的z指数比内容高，尽管内容会出现在模态的顶部，因为“content”是具有z-index属性的父元素。

这里有一篇文章解释了z-index可能不起作用的4个原因: https://coder-coder.com/z-index-isnt-working/