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，而是相对于父项中的相邻子项。

换句话说，一个孩子的z-index就是它在父母中的z-index，它不能高于或低于父母，因为它在父母的内部。

Answer 2

如果您尝试将灰色背景放在加载图像后面，则不一定需要2个div。您可以将其合并为一个背景 -

IEnumerable<GenericModel>

IEnumerable<ChildClass>

为什么z索引不使用fixed和child元素

2 个答案: