为什么 `transform` 会取消 `z-index` 以及如何修复它？

通过转换取消 z-index：了解堆叠上下文

在提供的代码中，“.test”元素的 z-index 被取消当应用变换属性时。要理解这种行为，我们必须深入研究堆叠上下文的概念。

自包含堆叠上下文：

transform 为“.test”创建一个堆叠上下文元素。堆叠上下文根据元素的 z-index 值确定元素的顺序。同一堆叠上下文中的元素根据其 z 索引进行分层，较高的值出现在前面。

继承的堆叠上下文：

“.test:after” " 伪元素的 z 索引为负 (-1)。但是，该值仅影响其在“.test”元素的堆叠上下文中的位置。它不会将“.test:after”放在“.test”后面，因为 z-index 仅在单独的堆叠上下文中有意义。

解决问题：

至让 z-index 按预期工作，确保“.test”和“.test:after”共享相同的堆栈上下文。当使用变换旋转“.test”时会创建自己的堆叠上下文，使用包装器元素并旋转它允许“.test:after”继承相同的上下文。

使用包装器更新代码：

通过将“.test”封装在“.wrapper”中并对它应用变换，我们保留了“.test:after”的 z-index 层次结构，而仍在旋转“.wrapper”和“.test”。

以上是为什么 `transform` 会取消 `z-index` 以及如何修复它？的详细内容。更多信息请关注PHP中文网其他相关文章！