如何使子元素显示在其父元素之后(Z索引较低)?

如果元素构成一个层次结构,就不能这样做,因为每个定位元素都会创建新的 stacking context 和z-index是相对于同一堆栈上下文的元素的。

我已经成功地使用了以下内容。

Z-指数-1;

通过创建一个模仿父元素的伪元素,我找到了一种将子元素放在元素后面的方法。对下拉菜单之类的东西很有用-希望它有用,八年前的用户!

https://jsfiddle.net/x7up68s2/7/

.container > div {

  // will be beyond its child
  background-color: red;
  width: 150px;
  height: 50px;
  z-index: 10;

  // will be above its "child"
  &:before {
    content: '';
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: red;
    z-index: 7;
    top: 10px;
  }
}

.a > .b,
.b > .a {
  z-index: 5;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: teal;
}

你需要的是 position: absolute 以便Z索引工作。

此外,您还需要设置 left 和 top CSS属性将元素放置在正确的位置。您可能需要使用JavaScript来完成这项工作。