Question

我正试图让一个绝对定位的孩子出现在其绝对定位的父母后面。蓝色父母应该出现在红孩子的上方。

我尝试在孩子身上设置z-index: -1，但这会让红孩子看不到。

.container {
  position:relative;
  background-color:grey;
  width: 500px;
  height: 500px;
}
.parent {
  background-color:blue;
  position:absolute;
  top: 50px;
  left: 10px;
  height: 100px;
  width: 100px;
  border-radius: 100%;
}
.child {
  position:absolute;
  top:-5px;
  right: 0px;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background-color:red;
}

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

https://jsfiddle.net/dwil30/mh3qw64x/

Answer 1

嗯......看起来有点hacky，但是你的电话：）

您需要指定z-index的{{1}}，否则渲染器没有＆＃34; base＆＃34;用你的孩子比较的价值。

这是一个工作小提琴：

https://jsfiddle.net/cmvwLseo/

干杯

Answer 2

将孩子和父母分开，以便他们相对于一个共同的容器＆＃34;然后更新你的逻辑以相应地定位子节点并设置每个子节点的z-index属性。

＆＃13;

.container {
  position:relative;
  background-color:grey;
  width: 500px;
  height: 500px;
}

.parent {
  background-color:blue;
  position:absolute;
  top: 50px;
  left: 10px;
  height: 100px;
  width: 100px;
  border-radius: 100%;
  z-index:2;
}
.child {
  position:absolute;
  top:50px;
  left: 90px;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background-color:red;
  z-index:1;
}

＆＃13;

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

＆＃13;

使绝对定位的父项出现在绝对定位的子项之上

2 个答案: