css - 使绝对定位的父项显示在绝对定位的子项的顶部

This question already has answers here:

How to position a parent div on top of its child?
                                
                                    （3个答案）
                                
                        
                                2年前关闭。
            
                    
我试图使绝对定位的孩子出现在其绝对定位的父对象后面。蓝色父项应出现在红色子项上方。

我尝试在子级上设置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/

最佳答案

好吧...似乎有点骇人听闻，但您可以致电:)

您需要指定z-index中的container，因为否则渲染器没有“基本”值来与您的孩子进行比较。

这是一个工作的小提琴：

https://jsfiddle.net/cmvwLseo/

干杯

关于css - 使绝对定位的父项显示在绝对定位的子项的顶部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47268483/