css - 子元素的z-index如何高于父元素的兄弟元素的z-index值？-PHP中文网问答

学习ing2017-06-20 10:08:21 6楼

根据规范，z-index是应用到定位元素的，也就是position属性不为relative的元素，否则，设置z-index是没有意义的；
z-index的作用有两点，一是设置在当前堆叠上下文(stacking context)中的层级；二是创建一个新的堆叠上下文；
z-index并不是设置的值越高，就会越靠近用户，还和堆叠上下文有关系；

在同一个堆叠上下文中的元素，z-index越高越靠近用户；
在不同堆叠上下文中的元素，如果堆叠上下文一距离用户更近，那么它的所有子元素都在另一个堆叠上下文子元素的前面，也就是离用户更近，不同堆叠上下文中的子元素不可能发生交叉；
所以，z-index其实不是一个绝对值，而是一个相对值；

举例如下：

    <body>
        <p class="p1">
            <p class="p1p1">
                <p class="p1p1p1"></p>
            </p>
        </p>
        <p class="p2">
            <p class="p2p1"></p>
        </p>
    </body>

body {
    margin: 0;
}

.p1 {
    width: 700px;
    height: 700px;
    background: red;
}

.p1p1 {
    width: 300px;
    height: 300px;
    background: green;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 500;
}

.p1p1p1 {
    width: 200px;
    height: 200px;
    background: yellow;
    position: absolute;
    z-index: 10;
}

.p2 {
    width: 600px;
    height: 600px;
    background: pink;
    position: absolute;
    z-index: 400;
    top: 0;
}

.p2p1 {
    width: 500px;
    height: 500px;
    background: blueviolet;
    position: absolute;
    z-index: 800;
}

对于.p1p1p1和.p2p1，虽然后者的z-index(800)高于前者(10)，但是因为前者所在的堆叠上下文(.p1p1)的z-index(500)高于后者所在的堆叠上下文(.p2p1)的z-index(400)，所以前者是在后者上面的。

评论里面你设置p{z-index:9;position:relative;}会建立一个新的堆叠上下文，和p同级的元素是0，img元素是9 -1，因为9>0，所以img是在上面的。

按照你的题目，其实position属性是不能改的，如果把position属性改为relative，那你的z-index属性其实就不起作用了，在z-index都起作用的情况下，是没有办法达到你的要求的，理由如下：

A 888
H 888 1000
B 999

A, B和H的层级如上，因为888 < 999，所以A和H都在B的下边。

赞 +0

添加回复

扔个三星炸死你2017-06-20 10:08:21 5楼

不能。因为你的H和B都是position: absolute，可以认为，绝对定位的元素在z轴上的偏移量远远大于z-index可以设置的量（可以认为绝对定位元素有着无穷大的z偏移）。因此，H和B两个元素的z-index实际上并不起到任何作用。

去掉了position: absolute之后，代码如下

<p class='A' style="background-color:blue;height:100px;margin-bottom: -200px;padding: 30px;display:block;z-index: 888;">
    <h1 class='H' style="color: #fff;z-index: 1000;margin-top: 60px;display: block;">
        This is a heading
    </h1>
</p>

<p class='B' style="height: 100%;width: 100%;background: #000;z-index: 999;"></p>

效果：