更新

Question

如何正确解决此问题，因此蓝色图层与下一行的红色元素重叠。

现在蓝色面板位于红色元素下方。

尝试了各种各样的事情：

transform-style: preserve-3d;
transform: translate3d(0,0,0); /*on all elements*/

http://codepen.io/anon/pen/vNbQre

Answer 1

Z-index始终相对于其父级。因此，您无法将.subpanel元素的z-index设置为高于其他.item元素，因为父母彼此不在“上方”。

在此处详细了解堆叠背景：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

然而，你可以做的是给.item个元素一个z-index，将第一个项目设置为最高等...这可以很容易地实现，因为你无论如何都在使用SCSS。

我在SCSS中更改了for循环

@for $i from 1 through 24 {
    .widthHelper:nth-child(#{$i}) .item {
        animation-delay: $i * 50ms;
        z-index: #{24 - $i + ($i % 4)};
    }
}

Codepen： http://codepen.io/grrtbrtr/pen/zveyBN

更新

更新了z-index计算以允许双方重叠。有关详细信息，请参阅Codepen。

如果元素向左增长，则此方法有效。如果您希望.subpanel元素左右重叠，您需要将它们移出.item元素，请阅读上面关于z-index堆叠上下文的链接，了解为什么这样做嵌套重叠元素时不起作用。

当父元素上有动画时，Z-index被否决

1 个答案:

更新