你如何获得一个职位:绝对; 位置上方的元素:相对; 一

Question

你可以在这个小提琴中看到问题.

我有一个绝对定位的元素,其z-index为2,相对定位的元素的z-index为1.相对定位的元素包含绝对定位的元素.我认为z-index:2元素会显示在z-index上面:1个项目,但事实并非如此.有没有办法解决这个问题,以便z-index:2项首先是z-index:1项？

div {
  background: green;
  position: relative;
  width: 100%;
  z-index: 1;
}

span {
  top: 0;
  right: 0;
  z-index: 2;
  position: absolute;
  border: solid 1px red;
  height: 70px;
  background: white;
}

<div>
  Row 1
  <span>I thought this would show above 'Row 2'</span>
</div>
<div>
  Row 2
</div>

Answer 1

当您添加z-index到一个孩子是在还具有一个定位的父元素z-index,父z-index启动一个新的堆叠顺序,孩子z-index是相对父z-index.所以在这种情况下,z-index: 2只与父母内部的其他元素进行比较z-index: 1.为了解决这个问题,你可以只应用z-index到span,或不给最后div一个z-index

你可以在这里阅读更多相关信息https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

body {
  font-family: arial;
}

* {
  padding: 10px;
}

div {
  background: green;
  position: relative;
  width: 100%;
  
}

div:first-child {
  z-index: 1;
}

span {
  top: 0;
  right: 0;
  z-index: 2;
  position: absolute;
  border: solid 1px red;
  height: 70px;
  background: white;
  display: inline-block;
}

<div>
  Row 1
  <span>
  I thought this would show above 'Row 2'
</span>
</div>
<div>
  Row 2
</div>