html - 为什么 z 索引不适用于固定元素和子元素

Question

我试图将我的子元素发送到堆栈层的底部，但在输出中它位于顶部而不是加载代码 https://jsfiddle.net/6qop5vtL/1/

这是我的代码

.loadermask { 
    position:absolute; 
    z-index: 900;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background:rgba(0,0,0,0.4);
}

.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background:url(https://transfast.com/Projects/Transfast.UI/img/loadingimg.gif) center no-repeat;
}

Answer 1

将 HTML 更改为:

<div class="se-pre-con">
</div>
<div class="loadermask">
</div>

当loadermask是se-pre-con的子级时，它的z-index不是相对于整个DOM，而是相对于其内部的相邻子级 parent 。

换句话说，子项的 z 索引只是其在父项中的 z 索引，它不能高于或低于父项，因为它位于父项内部。