为什么`transform:rotate()`取消了`z-index`？

Z-index被Transform(rotate)取消

理解行为

在CSS中，使用transform属性可以创建一个新的“堆叠上下文” “在一个元素上。这意味着该元素及其子元素在渲染过程中形成一个单独的层。此外，具有非默认 z-index 值的元素也会创建自己的堆叠上下文。

问题说明

在提供的代码中，.test 元素具有 Transform:rotate(10deg);，它创建了一个堆叠上下文。然后，.test:after 伪元素被分配 z-index: -1。然而，这并不会将其置于 .test 之后。

原因

Z-index 在堆叠上下文中运行。通过在 .test 上设置 -webkit-transform，它会为元素及其子元素创建一个新的堆叠上下文。因此，.test:after 上的 z-index: -1 只会影响其在 .test 堆叠上下文中的位置。

解决方案

要解决此问题，请确保 .test 和.test:after 共享相同的堆栈上下文。实现此目的的一种方法是将 .test 放入包装容器中并旋转容器。

示例

以下是更新的代码：

.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;
  -webkit-transform: rotate(3deg);
  transform: rotate(3deg);
  z-index: -1;
}

<div class="wrapper">
  <div class="test">z-index is canceled.</div>
</div>

在此示例中，变换旋转应用于 .wrapper 容器，为 .test 和 .test:after 创建单个堆叠上下文。这使得 .test:after 上的 z-index: -1 按预期生效。

以上是为什么`transform:rotate()`取消了`z-index`？的详细内容。更多信息请关注PHP中文网其他相关文章！