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/

10-09 13:57