Question

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

我需要：

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

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

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

为了实现我想要的功能，我做了一个条件语句，其中重叠的子元素在阻塞其父视图的情况下将变得透明。它并不完美，但它确实存在。

Answer 1

如果元素构成层次结构，则无法以这种方式完成，因为每个定位元素都会创建新的stacking context，并且z-index相对于相同堆叠上下文的元素。

Answer 2

您现在可以在现代浏览器中使用带有CSS的transform 3D来做到这一点。在2010年确实不可能，但现在已经可以。

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

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

<div class="one">
  Hi
  <div class="two">
    Hi
  </div>
</div>

Answer 3

我使用以下内容取得了成功。

z-index：-1;

Answer 4

我找到了一种方法，通过创建一个模仿父元素的伪元素，将子元素实际放在元素后面。对于像下拉菜单这样的东西很有用 - 希望它对八年前的用户有帮助！

https://jsfiddle.net/x7up68s2/7/

ISFILTERED

Answer 5

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

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

Answer 6

问题的答案

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

要去：

让父母不是stacking context
给孩子一个positioned stacking context，其z索引小于0。

注意：我说过让孩子成为已定位的堆叠环境 ，不只是堆叠上下文，因为请注意z-index will only be valid for positioned element）

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

结论：

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

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

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

6 个答案: