时间戳

首页 > 解决方案 > Z-index 不适用于父（相对）子（绝对）元素

html - Z-index 不适用于父（相对）子（绝对）元素

问题描述

我试图让黑盒子出现在椭圆形元素（父级）的后面。因此，我决定使用z-index，将父级的值设置为高于子级的值。但是，孩子仍然出现在父母之上。我通过将孩子设置z-index为 -1 并z-index从父母那里删除属性来解决这个问题。但我不明白为什么会这样，如果我想将z-index属性保留在父级中怎么办？

这是我的 HTML：

   <div id="x">
     <div id="y"> </div>
   </div>

这是我的CSS：

#x{
  position: relative;
  margin-top:40px;
  height:400px;
  width:250px;
  border-radius: 40%;
  margin-left: 30%;
  background: linear-gradient(to bottom,  #f5e050 78%, #517693 0%);
  z-index:9999;

}
#y{
  height: 5%;
  width: 15%;
  position: absolute;
  top:97%;
  left:36%;
  background-color:black;
  z-index: 1;
}

标签： htmlcss

解决方案

推荐阅读