z-index通过设置transform（rotate） [英] z-index is canceled by setting transform(rotate)
问题描述
使用transform属性，z-index被取消并出现在前面。
（当注释-webkit-transform时，z-index在以下代码中正常工作）
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)
HTML
<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>
CSS
.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;
}
transform和z-index如何协同工作？
How do transform and z-index work together?
推荐答案
好的，让我们来看看发生了什么。要开始，请注意定位元素上的 z-index 和 transform 本身创建新的堆叠上下文。下面是发生了什么：
OK, let's walk through what is occurring. To start, note that z-index on positioned elements and transform by itself create new "stacking contexts" on elements. So here's what's going on:
您的 .test 元素有 transform 设置为非none，这给它自己的堆叠上下文。
Your .test element has transform set to something other than none, which gives it its own stacking context.
然后添加 .test：after 伪元素，它是 .test 的子元素。这个孩子有 z-index：-1 ，设置 .test：堆叠上下文 .test 在上设置不将它放在 z-index：-1 。测试：之后 .test 后面，因为 z-index
You then add a .test:after pseudo-element, which is a child of .test. This child has z-index: -1, setting the stack level of .test:after within the stacking context of .test Setting z-index: -1 on .test:after does not place it behind .test because z-index only has meaning within a given stacking context.
从 .test中删除会删除其堆叠上下文，导致 -webkit-transform .test 和 .test：after 后共享堆栈上下文（< html> ）和 .test：after .test 。注意，在删除 .test 的 -webkit-transform 规则后，可以再次给它自己的堆叠上下文通过在 .test （再次，因为它是定位）设置新的 z-index 规则
When you remove -webkit-transform from .test it removes its stacking context, causing .test and .test:after to share a stacking context (that of <html>) and making .test:after go behind .test. Note that after removing .test's -webkit-transform rule you can once-again give it its own stacking context by setting a new z-index rule (any value) on .test (again, because it is positioned)!
好，那么，我们如何解决您的问题？
z-index以你期望的方式工作，确保 .test 和 .test：after 共享相同的堆叠上下文。问题是，你想要 .test 与transform一起旋转，但这样做意味着创建自己的堆叠上下文。幸运的是，在包装容器中放置 .test ，并且旋转它仍然允许其孩子共享堆叠上下文，同时也旋转两者。
To get z-index working the way you expect, make sure that .test and .test:after share the same stacking context. The problem is that you want .test rotated with transform, but to do so means creating its own stacking context. Fortunately, placing .test in a wrapping container and rotating that will still allow its children to share a stacking context while also rotating both.
-
以下是您开始的： http://jsfiddle.net/fH64Q/
这里有一个方法可以解决堆栈上下文并保持
的旋转：http://jsfiddle.net/fH64Q/2/ （请注意，阴影会因为 .test 而被截断$ c>的白色背景）
And here's a way you can get around the stacking-contexts and keep
the rotation: http://jsfiddle.net/fH64Q/2/ (note that the shadow gets a bit cut off because of .test's white background)
还有其他方法可以做到这一点，我可能会使post-it背景包含元素，然后把文本放在里面，这可能是最简单的方法，并将减少你所拥有的复杂性。
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.
有关<$的更多详情，请查看本文 c $ c> z-index 和堆叠顺序，或关于堆叠上下文的工作W3C CSS3规范
Check out this article for more details about z-index and stacking order, or the working W3C CSS3 spec on stacking context
这篇关于z-index通过设置transform（rotate）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
