我创建了两个兄弟div,并在最后一个上应用了负边距,但当我给第一个添加了position: relative
时,它重叠了它的下一个兄弟:
.box {
width: 100px;
height: 100px;
}
.box-1 {
position: relative;
background: orange;
}
.box-2 {
margin-top: -50px;
background: yellowgreen;
}
<div class="box box-1">box-1</div>
<div class="box box-2">box-2</div>
然而,MDN认为:
z-index值为非“auto”的定位元素(绝对或相对定位)将创建一个新的堆叠上下文。
所以我猜不是堆叠上下文造成了重叠,你知道这是怎么发生的吗?