html - 当堆叠在其他 z-index 中时理解 css z-index

Question

我正在尝试看看是否可以将元素交织在一起。我有一种感觉，这甚至是不可能的。唯一需要注意的是 b 是 a 的子元素，d 是 c 的子元素>，并且 a 和 c 是 sibling (几乎 html 无法更改为业务规则)。

HTML

<div style="position:relative;margin-top: 50px">
    <div class="z a">
        <div class="z b"></div>
    </div>
    <div class="z c">
        <div class="z d"></div>
    </div>
</div>

CSS

.z{ position: absolute }
.a{ left: 10px; right: 10px; top: 10px; height: 50px; background-color: blue;}
.b{ left: 50px; right: 50px; top: 10px; height: 50px; background-color: red;}
.c{ left: 20px; right: 20px; top: 30px; height: 50px; background-color: green;}
.d{ left: 10px; right: 10px; top: 10px; height: 50px; background-color: purple;}


.a{ z-index: 1;}
.b{ z-index: 2;}
.c{ z-index: 1;}
.d{ z-index: 2;}

JsFiddle Example

实际结果:

预期结果:

Answer 1

z-index属性设置元素的堆栈级别，相对于它所属的堆栈上下文。

因此，如果您想混合(在 z 轴上)不同元素的子元素，这些父元素一定不能建立任何堆叠上下文。这样子项将属于同一个堆叠上下文，您将能够使用 z-index 在 z 轴上对它们进行排序。

参见 Which CSS properties create a stacking context?了解如何防止元素建立堆叠上下文。其中，它需要默认的 position: static 或 z-index: auto 和 opacity: 1。

在您的例子中，.b 属于 z-index: 1 的堆栈上下文。然后，它被后面z-index大于或等于1的堆栈上下文的内容覆盖，如.c。将更高的 z-index 设置为 .b 不会阻止这种情况。如果您在 .c 上使用较低的 z-index，那么它的内容如 .d 将无法与 重叠.b.

相反，删除以下内容就足够了:

.a { z-index: 1; }
.c { z-index: 1; }

这样，.a 和 .c 将不会生成任何堆栈上下文，因此您将能够按照您的意愿对它们的子项进行排序。

.z{ position: absolute }
.a{ left: 10px; right: 10px; top: 10px; height: 50px; background-color: blue; }
.b{ left: 50px; right: 50px; top: 10px; height: 50px; background-color: red; }
.c{ left: 20px; right: 20px; top: 30px; height: 50px; background-color: green; }
.d{ left: 10px; right: 10px; top: 10px; height: 50px; background-color: purple; }

.b{ z-index: 2; }
.d{ z-index: 2; }

<div style="position:relative;margin-top: 50px">
  <div class="z a">
    <div class="z b"></div>
  </div>
  <div class="z c">
    <div class="z d"></div>
  </div>
</div>