关于z-index堆叠高度的疑惑

Question

两个既不是兄弟关系，又不是父子关系的元素如何比较堆叠高度?

像这种

<div class="A1">
    <div class="A2">
        <div class="A3">A3</div>
    </div>
</div>
<div class="B1">
    <div class="B2">B2</div>
</div>

.A1 {
    position: absolute;
}
.A2 {
    z-index: 2;
    position: absolute;
}
.A3 {
    z-index: 4;
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
}
.B1 {
    position: absolute;
}
.B2 {
    z-index: 3;
    position: absolute;
    left: 50px;
    width: 100px;
    height: 100px;
    background-color: yellow;
}

这里想要比较A3和B2哪儿个在上，哪儿个在下,发现实际比较的是A2和B2的z-index,因为2<3,所以B2在上,A3在下

如果去掉A2的z-index属性，则比较的是A3和B2的z-index,因为4>3,所以A3在上

所以比较两个元素的堆叠高度，应该是先向上找到互为兄弟的祖先元素，然后分别往下一层一层找,分别找到各自的第一个z-index不为空的元素，然后比较它们的大小，大的在上，小的在下，如果相同则祖先元素为弟元素的在上
这里的z-index为空跟z-index:auto是一个意思,而不是z-index:0,z-index等于0是需要比较的

这个理解不知道对不对？有没有更好的理解方式

Answer 1

双越 2020-07-22 07:57:23

是这样的。

不过，不知道浏览器兼容性上会不会好，z-index 的层叠之前一直都各个浏览器兼容不好。