在很多情况下，一个元素必须被定位到z-index才能工作。

实际上，应用position:相对于问题中的元素可能会解决问题(但没有提供足够的代码来确定)。

实际上，position: fixed, position: absolute和position: sticky也会启用z-index，但这些值也会改变布局。与位置:相对布局不会被打乱。

本质上，只要元素不是position: static(默认设置)，它就被认为是定位的，z-index就可以工作。

许多关于“为什么z-index不起作用?”的问题的答案都断言，z-index只对已定位的元素起作用。从CSS3开始，这种情况就不再存在了。

弹性项目或网格项目的元素即使在位置是静态的情况下也可以使用z-index。

从规格来看:

4.3. Flex Item Z-Ordering Flex items paint exactly the same as inline blocks, except that order-modified document order is used in place of raw document order, and z-index values other than auto create a stacking context even if position is static. 5.4. Z-axis Ordering: the z-index property The painting order of grid items is exactly the same as inline blocks, except that order-modified document order is used in place of raw document order, and z-index values other than auto create a stacking context even if position is static.

以下是z-index在非定位伸缩项目上的演示:https://jsfiddle.net/m0wddwxs/

你的元素需要有一个position属性。(例如绝对指数、相对指数、固定指数)或z指数都不起作用。

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

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

只要给出其他静态的位置。你应该给两个容器一个位置，这样就可以了。

在很多情况下，一个元素必须被定位到z-index才能工作。

实际上，应用position:相对于问题中的元素可能会解决问题(但没有提供足够的代码来确定)。

实际上，position: fixed, position: absolute和position: sticky也会启用z-index，但这些值也会改变布局。与位置:相对布局不会被打乱。

本质上，只要元素不是position: static(默认设置)，它就被认为是定位的，z-index就可以工作。

许多关于“为什么z-index不起作用?”的问题的答案都断言，z-index只对已定位的元素起作用。从CSS3开始，这种情况就不再存在了。

弹性项目或网格项目的元素即使在位置是静态的情况下也可以使用z-index。

从规格来看:

4.3. Flex Item Z-Ordering Flex items paint exactly the same as inline blocks, except that order-modified document order is used in place of raw document order, and z-index values other than auto create a stacking context even if position is static. 5.4. Z-axis Ordering: the z-index property The painting order of grid items is exactly the same as inline blocks, except that order-modified document order is used in place of raw document order, and z-index values other than auto create a stacking context even if position is static.

以下是z-index在非定位伸缩项目上的演示:https://jsfiddle.net/m0wddwxs/

如果你将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上叠加上下文的很棒的文章