Question

我需要父母div超过孩子。

我已经尝试将z-index设置为-1并且它适用于第一级，但我需要两个或更多个孩子深度。

＆＃13;

div {
  width: 200px;
  height: 300px;
  overflow: visible;
}
.one {
  position: relative;
  background: green;
}
.two {
  position: absolute;
  background: red;
  top: 0;
  left: 100px;
  z-index: -1;
}
.three {
  position: absolute;
  background: blue;
  top: 0;
  left: 150px;
  z-index: -1;
}

＆＃13;

<div class="one">
  <div class="two">
    <div class="three">    
    </div>
  </div>
</div>

＆＃13;

因此，第一类应该超过两个，两个超过三个

感谢

Answer 1

没有任何z-index值，元素按照它们在DOM中出现的顺序堆叠（在同一层次结构级别的最低层显示在顶部）。具有非静态定位的元素将始终显示在具有默认静态定位的元素的顶部。

另请注意，嵌套起着重要作用。如果元素B位于元素A的顶部，则元素A的子元素永远不会高于元素B.

试试这个

＆＃13;

div {
  width: 200px;
  height: 300px;
  overflow: visible;
}
.one {
  position: absolute;
  background: green;
  z-index:2;
}
.two {
  position: absolute;
  background: red;
  top: 50px;
  left: 100px;
  z-index: 1;
}
.three {
  position: absolute;
  background: blue;
  top: 100px;
  left: 150px;
}

＆＃13;

<div class="one">
</div>
<div class="two">
</div>
<div class="three">
</div>

＆＃13;

在CSS中将父级设置为子深度

1 个答案: