Question

我在定位方面遇到问题，我想将.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>

Answer 1

在您的示例中，两个div元素都以不同的z-index定位，这意味着它们按照在标记中出现的顺序进行堆叠，第一个声明的元素具有最高的堆叠索引。

因此，根据该定义，.sibling-child不会出现在.parent上方。

有关更多信息，请参见W3C specification on stacking context。请特别注意第9点：

由具有z索引的定位后代形成的堆叠上下文大于或等于1（按z索引顺序排列（最小），然后为树）订单。

Answer 2

这是我唯一能想到的。

transform: translate3d(0, -100px, 20px);

.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;
  transform: translate3d(0, -100px, 20px);
}

<div class="parent">
  <div class="child">

  </div>
</div>
<div class="sibling">
  <div class="sibling-child">

  </div>
</div>

不能重叠兄弟元素

2 个答案: