Question

我有一个div（父母）和另一个div（父母）（孩子），我想将孩子隐藏在父母的后面。

编辑：我会尽力解释得更好，所以我谈论z轴，但是如果我做类似的事情：

.parent {
  z-index: 10;
}

.child {
  z-index: 0;
}

它不起作用。所以我问你一个问题：我的孩子如何在z轴上位于我父母的下面？

.parent {
  width: 200px; height: 200px;
  background-color: red;
}

.child {
  width: 100px; height: 100px;
  background-color: blue;
}

<div class="parent">
  <div class="child"></div>
</div>

Answer 1

如果要使用z-index。 z-index 仅适用于定位的元素（position：absolute，position：relative或position：fixed）。

.parent {
  background-color: red;
  height:100px;
  width:100px;
}

.child {
  background-color: blue;
  height:50px;
  width:50px;
  position:relative;
  z-index: -1;
}

<div class="parent">
  <div class="child"></div>
</div>

Answer 2

使用position: relative;

重试

Answer 3

davecar21击败了我，但基本上孩子需要position: relative和z-index: -1在一起。

但是，我想补充一点，将孩子放在其父母的后面感觉就像是一种反模式。对我而言，z-indexing表示兄弟姐妹之间的分层，因此，如果可能的话，我建议重组您的方法，以使父子元素实际上是相邻的兄弟姐妹，也许嵌套在某些包含元素中。

在css / html中，z轴上的子项上方的父项

3 个答案: