如何让子元素显示在其父元素后面（较低的 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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 jholster 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

您现在可以在现代浏览器中使用 transform 3D with CSS 来执行此操作。这在 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 发布，翻译遵循 CC BY-SA 4.0 许可协议