CSS 通过设置 transform(rotate) 取消 z-index
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20851452/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
z-index is canceled by setting transform(rotate)
提问by kbth
Using transform property, z-index is canceled and appeared in the front. (When commenting out -webkit-transform, z-index is properly working in below code)
使用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>How do transform and z-index work together?
变换和 z-index 如何协同工作？
回答by Lochlan
Let's walk through what is occurring. To start, note that z-indexon positioned elements and transformby itself create new "stacking contexts" on elements. Here's what's going on:
让我们来看看正在发生的事情。首先，请注意z-index在定位元素上并在元素transform上创建新的“堆叠上下文”。这是发生了什么：
Your .testelement has transformset to something other than none, which gives it its own stacking context.
您的.test元素已transform设置为 none 以外的其他值，这为其提供了自己的堆叠上下文。
You then add a .test:afterpseudo-element, which is a child of .test. This child has z-index: -1, setting the stack level of .test:afterwithin the stacking context of .testSetting z-index: -1on .test:afterdoes not place it behind .testbecause z-indexonly has meaning within a given stacking context.
然后添加一个.test:after伪元素，它是.test. 这个孩子有z-index: -1，.test:after在.testSetting z-index: -1on的堆叠上下文中设置堆栈级别.test:after不会把它放在后面，.test因为z-index只在给定的堆叠上下文中有意义。
When you remove -webkit-transformfrom .testit removes its stacking context, causing .testand .test:afterto share a stacking context (that of <html>) and making .test:aftergo behind .test. Note that after removing .test's -webkit-transformrule you can, once again, give it its own stacking context by setting a new z-indexrule (any value) on .test(again, because it is positioned)!
当您-webkit-transform从中移除时，.test会移除其堆叠上下文，从而导致.test并.test:after共享堆叠上下文（ 的<html>）并使.test:after落后于.test。请注意，在删除.test的-webkit-transform规则后，您可以再次通过z-index在.test（再次，因为它已定位）上设置新规则（任何值）来为其赋予自己的堆叠上下文！
So how do we solve your problem?
那么我们如何解决您的问题？
To get z-index working the way you expect, make sure that .testand .test:aftershare the same stacking context. The problem is that you want .testrotated with transform, but to do so means creating its own stacking context. Fortunately, placing .testin a wrapping container and rotating that will still allow its children to share a stacking context while also rotating both.
要让 z-index 以您期望的方式工作，请确保.test并.test:after共享相同的堆栈上下文。问题是您想要.test使用变换进行旋转，但这样做意味着创建自己的堆叠上下文。幸运的是，放置.test在一个包装容器中并旋转它仍然允许它的孩子共享堆叠上下文，同时也旋转两者。
Here's what you started with: http://jsfiddle.net/fH64Q/
And here's a way you can get around the stacking-contexts and keep the rotation (note that the shadow gets a bit cut off because of
.test's white background):
这是你的开始：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>There are other ways to do this, better ways even. I would probably make the "post-it" background the containing element and then put the text inside, that would probably be the easiest method and would reduce the complexity of what you have.
还有其他方法可以做到这一点，甚至更好。我可能会将“便利贴”背景设为包含元素，然后将文本放入其中，这可能是最简单的方法，并且会降低您拥有的内容的复杂性。
Check out this articlefor more details about z-indexand stacking order, or the working W3C CSS3 spec on stacking context
查看这篇文章了解更多关于z-index和堆叠顺序的细节，或者关于堆叠上下文的 W3C CSS3 规范
回答by AGrush
Set the div you want to stay on top to position:relative
设置你想留在顶部的div position:relative
回答by seeker_of_bacon
Had a similar problem where siblings were being transform: translate()'d and z-indexwouldn't work.
有一个类似的问题，兄弟姐妹被transform: translate()'d 并且z-index无法工作。
Most straightforward solution is to set position: relativeon all siblings, then z-indexwould work again.
最直接的解决方案是设置position: relative所有兄弟姐妹，然后z-index再次工作。
回答by Guy
Quick fix: You could just rotate the other element by 0 degrees as well.
快速修复：您也可以将另一个元素旋转 0 度。
回答by Ankur Sahu
I was facing the similar problem. What i did was, I added a wrapper div around the test and gave the transform property to the wrapper div.
我面临着类似的问题。我所做的是，我在测试周围添加了一个包装器 div，并将转换属性赋予包装器 div。
.wrapper{
transform: rotate(10deg);
}
here is the fiddle http://jsfiddle.net/KmnF2/16/
回答by Ankur Sahu
Set the div you want to stay on top to position:absolute
将您要留在顶部的 div 设置为 position:absolute
