为什么 z-index 在转换元素上失败以及如何修复？

z-index 由于转换而取消

在您提供的代码中，CSS 属性 z-index 在应用于 元素 时会失去功能。应用变换属性后进行测试。出现此问题的原因是转换属性为元素建立了新的堆叠上下文。

堆叠上下文确定重叠元素的显示顺序。通常，在同一堆叠上下文中，具有较高 z-index 值的元素会出现在具有较低 z-index 值的元素之上。但是，z-index 仅适用于 单个堆叠上下文。

在您的场景中，具有转换属性的 .test 元素已创建自己的堆叠上下文。伪元素 .test:after 虽然是 .test 的子元素，但仍保留在这个新的堆栈上下文中。因此，在 .test:after 上设置 z-index: -1 只会将其放置在 .test 的堆叠上下文中，但不会将其放置在 .test 后面。

要解决此问题，您可以 **创建一个新的通过将 .test 和 .test:after** 包装在容器元素中来堆叠上下文。这种方法确保它们共享相同的堆栈上下文，从而允许 z-index` 按预期运行。

这是修改后的代码：

.wrapper {
    -webkit-transform: rotate(10deg);
}
.test {
       width: 150px;
       height: 40px;
       margin: 30px;
       line-height: 40px;
       position: relative;
       background: white;
}
.test:after {
       width: 100px;
       height: 35px;
       content: "";
       position: absolute;
       top: 0;
       right: 2px;
       -webkit-box-shadow: 0 5px 5px #999; /* Safari and Chrome */
       -webkit-transform: rotate(3deg); /* Safari and Chrome */
       transform: rotate(3deg);
       z-index: -1;
}

通过为 .wrapper 创建单独的堆栈上下文，.test 和 .test:after 共享相同的上下文。这允许 z-index 正确地将 .test:after 定位在 .test 后面，同时保持所需的旋转。

以上是为什么 z-index 在转换元素上失败以及如何修复？的详细内容。更多信息请关注PHP中文网其他相关文章！