<分区>
标签 javascript html css
<分区>
我的定位有问题，我想把 .sibling-child 放在 .parent 上而不修改当前的 z-index。有没有办法在 CSS 中做到这一点？
这里是有问题的 jsfiddle。 http://jsfiddle.net/8hb6xgLj/1/
.parent {
width: 300px;
height: 100px;
background: #333;
position: relative;
z-index: 10;
}
.child {
top: 60px;
position: absolute;
width: 50px;
height: 80px;
background: red;
}
.sibling {
width: 300px;
height: 100px;
background: #ccc;
position: relative;
z-index: 9;
}
.sibling-child {
top: 10px;
position: absolute;
width: 70px;
height: 80px;
background: blue;
}<div class="parent">
<div class="child">
</div>
</div>
<div class="sibling">
<div class="sibling-child">
</div>
</div>最佳答案
在您的示例中，两个 div 元素都使用不同的 z-index 定位，这意味着它们按照它们在标记中出现的顺序堆叠，第一个声明的元素具有最高的堆叠索引。
因此，根据该定义，.sibling-child 不可能出现在 .parent 之上。
参见 W3C specification on stacking context了解更多信息。特别注意第 9 点:
Stacking contexts formed by positioned descendants with z-indices greater than or equal to 1 in z-index order (smallest first) then tree order.
关于javascript - 不能重叠兄弟元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53347429/