html - css / html中z轴上的父级高于子级

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>

标签： htmlcssparent-child

Answer 1

如果您将使用 z-index. z-index仅适用于定位元素（位置：绝对、位置：相对或位置：固定）。

.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>