如何让子元素显示在其父元素后面（低于 z-index）？答案

【问题标题】：How to get a child element to show behind (lower z-index) than its parent?如何让子元素显示在其父元素后面（低于 z-index）？
【发布时间】：2011-01-31 00:21:43
【问题描述】：

我需要某个动态元素始终出现在另一个元素之上，无论它们在 DOM 树中的顺序如何。这可能吗？我试过z-index（和position: relative），但它似乎不起作用。

我需要：

<div class="a">
    <div class="b"></div>
</div>

<div class="b">
    <div class="a"></div>
</div>

在渲染时显示完全相同。并且出于灵活性的目的（我计划分发一个需要此功能的插件），我真的希望不必求助于绝对定位或固定定位。

对于它的价值，为了执行我想要的功能，我做了一个条件语句，其中重叠的子元素会在它阻挡其父元素的视图的情况下变得透明。它并不完美，但它是一些东西。

【问题讨论】：

这是可能的 - 假设您只有 1 级深度的嵌套（如示例中所示）。这将起作用：.a > .b, .b > .a {z-index: -1; position: relative}。如果您需要小提琴，请发表评论，但我认为这是不言自明的。

标签： html css dom

【解决方案1】：

您现在可以在现代浏览器中使用带有 CSS 的 3D 变换来完成此操作。这在 2010 年是不可能的，但现在可以了。

.parent {
  background: red;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  position: relative;
}

.child {
  background: blue;
  width: 100px;
  height: 100px;
  position: absolute;
  top: -5px;
  left: -5px;
  transform: translateZ(-10px)
}

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

【讨论】：

我已经修复了它，所以代码更明显。

【解决方案2】：

问题的答案

如何让子元素显示在其父元素后面（低于 z-index）？

是：

使父级不是stacking context
将孩子设为positioned stacking context，其z-index 小于0。

注意：我说让孩子成为定位的堆叠上下文，不仅仅是堆叠上下文，因为要注意z-index will only be valid for positioned element)

关于如何将元素视为堆叠上下文，请阅读this，以及如何将元素视为定位元素，请阅读this。或者来自this answer 的精彩解释。

结论：

确保父级不是堆叠上下文
确保子是堆叠上下文
确保孩子的z-index 小于0
确保子元素是定位元素，以便上一步中的z-index 适用

但您必须了解stacking context 和positioned element 两个术语

【讨论】：

【解决方案3】：

我想出了一种方法，通过创建一个模仿父元素的伪元素，将子元素实际放在其元素后面。对下拉菜单之类的东西很有用 - 希望对八年前的用户有所帮助！

div {
	 position: relative;
}
 .container > div {
	 float: left;
	 background-color: red;
	 width: 150px;
	 height: 50px;
	 z-index: 10;
}
 .container > div: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;
}
 .a + .b {
	 margin-left: 20px;
}

<div class="container">
  <div class="a">
    <div class="b"></div>
  </div>

  <div class="b">
    <div class="a"></div>
  </div>
</div>

【讨论】：

【解决方案4】：

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

z-index: -1;

【讨论】：

这不能回答所提出的问题
赞成，这不值得反对。这部分回答了所提出的问题 - 如果他用小提琴演示会更好。
这确实值得反对，因为它不正确。该问题指定使用 z-index 和不使用绝对定位让子元素显示在其父元素后面。正如 jholster 所解释的那样，在这些条件下无法实现这一点。
对于子元素和父元素的固定定位，它可以工作。赞成。

【解决方案5】：

如果元素构成层次结构，则不能那样做，因为每个定位的元素都会创建新的stacking context，并且 z-index 是相对于同一堆叠上下文的元素的。

【讨论】：

我几乎认为是这种情况，但我并不认为自己什么都知道。不管怎样，谢谢大家。
虽然这是公认的答案，（也许这个答案当时是正确的？但是）这不是真的 - 请参阅其他答案以了解让孩子落后于父母的方法。（我只是偶然做的，我之前认为这是不可能的，并在寻找它是如何发生的时发现了这个问题）
如果你将子元素的 z-index 设置为 -1，那么它会落后于它的父元素

【解决方案6】：

您需要 position: absolute 才能使 z-index 正常工作。

您还需要设置left 和top css 属性以将元素放置在正确的位置。您可能需要使用 javascript 来执行此操作。

【讨论】：

z-index 适用于定位（=相对、绝对、固定），即非静态元素。
或position: fixed; ^_^