让我们逐步了解正在发生的事情。首先，请注意
z-index在定位的元素上，并单独在元素上
transform创建新的“
堆栈上下文”。这是怎么回事：
您的
.test元素
transform设置为非空，这为其赋予了自己的堆叠环境。
然后添加一个
.test:after伪元素，它是的子元素
.test。这孩子
z-index: -1，设置的栈级别
.test:after
的堆叠范围内
.test设置
z-index:-1上
.test:after没有把它放在后面
.test，因为
z-index只有具有给定的堆叠上下文中的含义。
当您
-webkit-transform从中
.test删除它时，将删除其堆栈上下文，从而导致
.test并
.test:after共享一个堆栈上下文（的堆栈上下文
<html>）并使其
.test:after落后
.test。请注意，删除
.test的
-webkit-transform规则后，您可以再次通过在上设置新
z-index规则（任何值）来为其提供自己的堆栈上下文
.test（因为它已经定位）！
那么我们如何解决您的问题呢？
要使z-index以您期望的方式工作，请确保
.test并
.test:after共享相同的堆栈上下文。问题是您想
.test通过变换旋转，但这样做意味着创建自己的堆栈上下文。幸运的是，将其放置
.test在包装容器中并旋转，这仍将允许其子级共享堆叠上下文，同时也旋转它们。
这是一种可以绕开堆叠上下文并保持旋转的方法（请注意，由于
.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 >z-index is canceled.</div>
还有其他方法可以做到这一点，甚至还有更好的方法。我可能会将“ post-
it”背景作为包含元素，然后将文本放入其中，这可能是最简单的方法，并且可以减少所拥有内容的复杂性。
