Css 通过设置“变换”（旋转）取消z索引

使用transform属性，z索引被取消并显示在前面。 （当注释掉-webkit转换时，z-index在下面的代码中正常工作）

.test{
宽度：150px；
高度：40px；
利润率：30像素；
线高：40px；
位置：相对位置；
背景：白色；
-webkit变换：旋转（10度）；
}
.测试：之后{
宽度：100px；
高度：35px；
内容：“；
位置：绝对位置；
排名：0；
右：2px；
-网络工具包盒阴影：0 5px 5px#999；
/*狩猎与铬*/
-webkit变换：旋转（3deg）；
/*狩猎与铬*/
变换：旋转（3deg）；
z指数：-1；
}

使改变
z索引被取消。

让我们来看看发生了什么。首先，请注意定位元素上的

z-index

和

transform

本身会在元素上创建新的“”。下面是发生的事情：

您的

.test

元素将

transform

设置为none以外的其他值，这为它提供了自己的堆栈上下文

然后添加一个

.test:after

伪元素，它是

.test

的子元素。此子项具有

z-index:-1

，将堆栈级别设置为

。test:after

在

的堆栈上下文中。test

在

上设置
z-index:-1
。test:after

不会将其置于

之后。test

因为

z-index

仅在给定的堆栈上下文中有意义

当您从

.test

中删除

-webkit transform

时，它会删除其堆栈上下文，从而导致

.test

和

。test:after

共享堆栈上下文（即

的堆栈上下文）并使

生效。test:after

返回

.test

。请注意，在删除

.test

的

-webkit transform

规则后，您可以通过在

上设置新的
z-index
规则（任何值）

（再次，因为它已定位）

那么我们如何解决您的问题呢？

要使z索引按预期方式工作，请确保

.test

和

.test:after

共享相同的堆栈上下文。问题是您希望

.test

随transform旋转，但这样做意味着创建自己的堆栈上下文。幸运的是，将

.test

放在一个包装容器中并旋转，这样子容器仍然可以共享堆叠上下文，同时也可以旋转两者

• 以下是您开始的内容：

• 这里有一种方法，你可以绕过堆叠上下文，保持 旋转（请注意，由于

  .test

  的白色背景，阴影被稍微截断）：

.wrapper{
-webkit变换：旋转（10度）；
}
.测试{
宽度：150px；
高度：40px；
利润率：30像素；
线高：40px；
位置：相对位置；
背景：白色；
}
.测试：之后{
宽度：100px；
高度：35px；
内容：“；
位置：绝对位置；
排名：0；
右：2px；
-webkit盒阴影：0 5px 5px#999；/*Safari和Chrome*/
-webkit变换：旋转（3deg）；/*Safari和Chrome*/
变换：旋转（3deg）；
z指数：-1；
}

z索引被取消。

我也面临着类似的问题。 我所做的是，在测试周围添加了一个包装器div，并将transform属性赋予包装器div

.wrapper{
    transform: rotate(10deg);
}

---

这是小提琴的快速修复方法：您也可以将另一个元素旋转0度。

将要留在顶部的div设置为

位置：relative

有一个类似的问题，同级被

转换：translate（）

'd和

z-index

无法工作

---

最简单的解决方案是在所有同级上设置

位置：相对
，然后
z-index
将再次工作。
将您希望保持在顶部的div设置为位置：绝对对于那些仍在寻找解决方案的人，我发现了这篇文章如何解决
转换
和
z-index

它的简单用法是：

.parent { transform-style: preserve-3d; }
.parent:before { transform: translateZ(-1em); }

这是我做的，你想用z-索引隐藏文本吗？工作正常，有什么疑问吗？谢谢你制作小提琴。我想显示文本矩形后面的阴影（就像一篇博文）。这是对CSS布局最复杂方面之一的一个很好的解释。为了将来阅读，在我无法旋转集装箱的情况下，这对我很有效。我遇到了一个奇怪的问题，z-索引没有被观察到，然后应用样式
transform:rotate（0.0rad）
修复了它。我不能通过css规则应用它，它必须直接在元素上。这毫无意义，但感谢你发布的答案，让我尝试了一下。这对我来说很有效。它与上面提到的堆栈上下文有关吗？如果有人能帮忙澄清，我们将不胜感激。也许是因为当你有一个相对（或绝对）的位置和一个z索引集时，会创建一个新的堆叠上下文？