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

Question

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

我需要：

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

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

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

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

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>

Answer 2

如果元素形成层次结构，则不能以这种方式完成，因为每个定位元素都会创建新的 堆叠上下文< /a>，而z-index是相对于同一堆叠上下文的元素。

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>

Answer 4

问题的答案

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

是：

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

注意：我说让子级成为一个定位堆叠上下文，
不仅仅是堆叠上下文，因为请注意z-index 仅对定位元素有效）

有关如何将元素视为堆叠上下文，请阅读这个，以及如何考虑元素定位元素，请阅读此。或者来自这个答案的精彩解释。

---

结论：

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

但是您必须理解 2 个术语堆叠上下文 和 定位元素

Answer 5

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

z 索引：-1；

Answer 6

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

Answer 7

为了让 z-index 工作，你需要的是 position:absolute 。

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