如何在三级层次结构中使用 z-index 定位元素进行布局

Question

我对 z-index 属性有疑问。我有一些绝对定位的元素（代码中的div）一个在彼此内部。里面的第一个 div（红色 div）自然会在它的父元素（aliceblue 元素）前面，因此我给里面的红色 div 一个负的 z-index 就可以了。但是 aqua div（在红色 div 里面）也在红色元素的前面（相反我会把 aqua 元素放在红色元素后面），为了把它放在后面我给它 z-index:-5 例如，但它不起作用，因为我创建了一个新的堆叠上下文，不同于其父亲的堆叠上下文

         div {
            width: 300px;
            height: 300px;
            text-align: center;
            position: absolute;
         }
         .a {
            background-color: aliceblue;
            position: relative;
         }
         .a1 {
            background-color: red;
            left: 20px;
            top: 20px;
            z-index: -1;
         }
         .a11 {
            background-color: aqua;
            left: 10px;
            top: 10px;
            /* z-index: -5; This doesn't work*/
         }

         .a2 {
            background-color: yellow;
            top: 40px;
            z-index: -2;
         }

  
      <div class="a">
         A
         <div class="a1">
            A1
            <div class="a11">A11</div>
         </div>
         <div class="a2">A2</div>
      </div>

Answer 1

到目前为止，我们还没有找到使用 z-index 执行此操作的方法。

以下方法可能适合也可能不适合您的特定用途case/overall上下文，但它确实解决了问题中给出的代码的问题。

此代码段使用 3d 变换而不是 z-index 来定位与正注视屏幕的观看者相关的元素。

当然，我们实际上并不想引入可感知的视角，因此该片段使用了一个小的向后移动 (0.1px)。这似乎足以让系统按要求的顺序将元素放置在彼此之上，但忽略了小部分（至少在我的 Windows10 Edge 上）。

div {
  width: 300px;
  height: 300px;
  text-align: center;
  position: absolute;
  transform-style: preserve-3d;
}

.a {
  background-color: aliceblue;
  position: relative;
  transform: translate3d(0, 0, 0);
}

.a1 {
  background-color: red;
  left: 20px;
  top: 20px;
  transform: translate3d(0, 0, -0.1px);
}

.a11 {
  background-color: aqua;
  left: 10px;
  top: 10px;
  transform: translate3d(0, 0, -0.2px);
}

.a2 {
  background-color: yellow;
  top: 40px;
  transform: translate3d(0, 0, -0.4px);
}

<div class="a">
  A
  <div class="a1">
    A1
    <div class="a11">A11</div>
  </div>
  <div class="a2">A2</div>
</div>

如何在三级层次结构中使用 z-index 定位元素进行布局

How to lay out with z-index positioned elements in a third level hierarchy

html

css

z-index

css-position