z-index通过设置变换（旋转）来取消
使用transform属性，z-index被取消并出现在前面。 （当注释掉-webkit-transform时，z-index在下面的代码中正常工作）
.test { width: 150px; height: 40px; margin: 30px; line-height: 40px; position: relative; background: white; -webkit-transform: rotate(10deg); } .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; } <html> <head> <title>transform</title> <link rel="stylesheet" type="text/css" href="transformtest.css"> </head> <body> <div class="test">z-index is canceled.</div> </body> </html>
变换和z-索引如何一起工作？
我们来看看发生了什么。 首先，请注意，定位元素上的z-index和transform自身会在元素上创build新的“ 堆叠上下文 ”。 以下是发生了什么事情：
你的.test元素已经transform .test none的东西，这给了它自己的堆栈上下文。
然后，在.test:after添加一个.test:after伪元素。 这个孩子有z-index: -1 ，设置.test:after的堆栈级别.test:after 的堆栈上下文之后设置z-index: -1在.test:after不放在后面.test因为只有z-index在给定的堆叠环境中具有含义。
当从.test删除-webkit-transform ，它将删除它的堆栈上下文，导致.test和.test:after共享一个堆栈上下文（ <html> ），并使.test:after后面.test 。 请注意，删除.test的-webkit-transform规则后，您可以再一次通过在.test上设置新的z-index规则（任意值）来给它自己的堆栈上下文（同样，因为它已定位）！
那么我们如何解决你的问题呢？
为了使z-index按照您期望的方式工作，请确保.test和.test:after共享相同的堆栈上下文之后。 问题是你想要.test使用transform来旋转，但是这意味着创build自己的堆栈上下文。 幸运的是，将.test放置在一个包装容器中并进行旋转，这样仍然可以让子项共享一个堆叠上下文，同时还可以同时旋转。
-
这是你开始的： http : //jsfiddle.net/fH64Q/
-
这里有一种方法可以解决堆叠上下文并保持旋转（请注意，阴影因为
.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; /* Safari and Chrome */ -webkit-transform: rotate(3deg); /* Safari and Chrome */ transform: rotate(3deg); z-index: -1; }
<div class="wrapper"> <div class="test">z-index is canceled.</div> </div>
我正面临类似的问题。 我做的是，我在testing中添加了一个包装div，并将transform属性赋予包装div。
.wrapper{ transform: rotate(10deg); }
这里是小提琴http://jsfiddle.net/KmnF2/16/我希望这可以帮助一些人请投票，如果你觉得有用谢谢;
