如何让子元素的 z-index 值比父元素低，以实现子元素在父元素后面显示？

Question

我需要一个动态元素始终显示在另一个元素的顶部，无论它们在DOM树中的顺序如何。这可行吗？我尝试过使用z-index（带有position: relative），但似乎不起作用。

我需要：

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

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

为了在渲染时完全一致地显示，并且出于灵活性的考虑（我计划分发一个需要此功能的插件），我真的不想使用绝对或固定定位。

值得一提的是，为了执行我所想要的功能，我编写了一个条件语句，当重叠的子元素挡住其父元素的视图时，它会变成透明的。这不是完美的，但总比没有好。

- dclowd9901

---

这是可能的 - 假设您只有1级深度的嵌套（如示例中所示）。 这将起作用：.a> .b，.b> .a {z-index：-1; position：relative}。 如果您需要一个小测试，评论一下，但我认为它相当简单明了。 - Ivan Durst

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

- Johnny

---

我已经修复了代码，使其更加明显。 - Johnny

Answer 2

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

- jholster

---

我基本上认为这是事实，但我并不自以为什么都知道。无论如何，谢谢大家。 - dclowd9901

尽管这是被接受的答案，（也许当时这个答案是正确的？但是）这并不是真的——查看其他答案以了解如何在父级后获取子级。（我刚刚偶然做到了这一点，之前我认为这是不可能的，并在搜索如何发生这种情况时找到了这个问题） - Kevin Wang

如果您将子元素的z-index设置为-1，则它会在其父元素后面。 - Tiernan Crotty

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

- moeses

Answer 4

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

答案是：

• 使父元素不是堆叠上下文
• 使子元素成为一个定位的堆叠上下文，其z-index小于0。

注意：我说的是使子元素成为一个定位的堆叠上下文，而不仅仅是堆叠上下文，因为请注意，z-index只对定位的元素有效。

关于如何考虑一个元素作为堆叠上下文，请阅读这里，如何考虑一个元素作为定位元素，请阅读这里。或者可以参考这个答案的详细解释。

---

总结：

• 确保父元素不是堆叠上下文
• 确保子元素是堆叠上下文
• 确保子元素的z-index小于0
• 确保子元素是一个定位元素，以便从上一步设置的z-index生效

然而您需要理解两个术语：堆叠上下文和定位元素

- Loi Nguyen Huynh

Answer 5

.element--child{
  position:relative;
  z-index:-1;
}

- Abhishek

Answer 6

我使用以下代码取得了成功。 z-index: -1;

- Damir Kotoric

---

这并未回答所提出的问题。 - Zach Saucier

点赞，这不应该被踩。这部分回答了问题，但如果他用一个小把戏来演示的话，会更好理解。 - Ivan Durst

这确实应该被点踩，因为它是不正确的。问题指定使用 z-index 并且不使用绝对定位来使子元素显示在其父元素后面。正如 jholster 所解释的那样，在这些条件下无法实现这一点。 - Luke

对于子元素和父元素的固定定位，它是有效的。已点赞。 - Lis

Answer 7

你需要的是使用 position: absolute 来使 z-index 生效。

此外，你还需要设置 left 和 top 的 CSS 属性来将元素定位到正确的位置。你可能需要使用 JavaScript 完成这个操作。

- mkoryak

---

z-index用于定位元素（相对定位、绝对定位、固定定位），即非静态元素。 - jholster

或者 position: fixed; ^_^ - EvgenyKolyakov