使绝对定位 parent 出现在绝对定位 child 之上

Question

我正在尝试使绝对定位 child 出现在其绝对定位 parent 后面。蓝色 parent 应该出现在红色 child 上方。

我尝试在 child 上设置 z-index: -1，但这会使红色 child 不可见。

.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

好吧……这似乎有点老套，但它由你决定:)

您需要指定 container 的 z-index，否则渲染器没有 "base" 值来与您的 child 进行比较。

这是一个工作 fiddle:

https://jsfiddle.net/cmvwLseo/

干杯

Answer 2

将子 div 和父 div 分开，使它们都相对于公共 "container" 定位，然后更新您的逻辑以相应地定位子 div 并设置每个的 z-index 属性。

.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;
}

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

使绝对定位 parent 出现在绝对定位 child 之上

Make absolute positioned parent appear on top of absolute positioned child

css

z-index