Question

我有一个子元素，需要在其父兄弟姐妹的前面。

.parent {
  background-color: yellow;
  position: relative;
  top: 0;
  left: 0;
  height: 200px;
  width: 200px;
  z-index: 0;
}

.child {
  background-color: red;
  position: absolute;
  top: 10px;
  left: 20px;
  height: 50px;
  width: 150px;
  z-index: 100;
}

.sibling {
  background-color: green;
  position: relative;
  top: -160px;
  left: 100px;
  height: 200px;
  width: 200px;
  z-index: 0;
}

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

在这种情况下，我希望红色div位于绿色div之前。

我的问题是父元素被循环出，这意味着它们具有相同的样式，这意味着我无法尝试使用z-index手动设置索引以使子代位于最前面。我还能改变什么简单的东西吗？

Answer 1

HTML的顺序已经指定了绿色的在黄色的上方。红色是唯一需要指定z-index的地方：

.parent {
  background-color: yellow;
  position: relative;
  top: 0;
  left: 0;
  height: 200px;
  width: 200px;
  /* z-index: 0; */
}

.child {
  background-color: red;
  position: absolute;
  top: 10px;
  left: 20px;
  height: 50px;
  width: 150px;
  z-index: 1;
}

.sibling {
  background-color: green;
  position: relative;
  top: -160px;
  left: 100px;
  height: 200px;
  width: 200px;
  /* z-index: 0; */
}

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

在父母兄弟姐妹面前显示绝对定位的孩子

1 个答案: