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

Question

我试图看看是否有可能将元素交织在一起。我觉得它甚至不可能。解决方案的唯一警告是b是a的子元素，d是c的子元素，a和{{1是兄弟姐妹（几乎html无法改变为业务规则）。

HTML

c

CSS

<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>

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不会阻止这种情况发生。如果您在z-index上使用较低的.c，则其.d之类的内容将无法与.b重叠。

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

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

这样，.a和.c不会生成任何堆叠上下文，因此您可以按照自己的意愿订购他们的孩子。

＆＃13;

＆＃13;

.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; }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;