如何让一个子元素显示在后面(较低的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

如果元素构成层次结构,则不能以这种方式完成,因为每个定位元素都会创建新的堆叠上下文,而z-index相对于相同堆叠上下文的元素.

Answer 2

您现在可以在现代浏览器中使用带有 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 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>