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

Question

我怎样才能正确解决这个问题，使蓝色层与下一行的红色元素重叠。

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

尝试了很多东西:

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

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

Answer 1

Z 索引总是相对于它们的父级。因此，您不能将 .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)};
    }
}

代码笔: http://codepen.io/grrtbrtr/pen/zveyBN

更新

更新了 z-index 计算以允许两侧重叠。 参见 Codepen了解更多详情。

如果元素向左增长，这会起作用。如果您希望 .subpanel 元素左右重叠，您需要将它们移出 .item 元素，请阅读上面关于 z 的链接-index 堆栈上下文，说明为什么在嵌套重叠元素时这不起作用。