z-index通过设置transform(rotate) [英] z-index is canceled by setting transform(rotate)
问题描述
使用transform属性,z-index被取消并出现在前面。
(当注释掉-webkit-transform时,z-index在以下代码中正常工作)
HTML
< html>
< head>
< title> transform< / title>
< link rel =stylesheettype =text / csshref =transformtest.css>
< / head>
< body>
< div class =test> z-index已取消。< / 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和Chrome * /
-webkit-transform:rotate(3deg); / * Safari和Chrome * /
transform:rotate(3deg);
z-index:-1;
}
transform和z-index如何协同工作?
让我们来看看发生了什么。首先,请注意定位元素上的 z-index
和 transform
本身创建新的堆叠上下文。这是发生了什么:
您的 .test
元素 transform
设置为非none,这给它自己的堆叠上下文。
然后添加 .test:$ c>伪元素,它是
.test
的子元素。此子项具有 z-index:-1
,设置 .test:堆叠上下文
.test
在上设置
不将它放在 z-index:-1
。测试:之后 .test
后面因为 z-index
当您从 .test中移除
会删除其堆叠上下文,导致 -webkit-transform
.test
和 .test:after
后共享堆栈上下文(< html>
)和 .test:after
.test 。注意,在删除 .test
的 -webkit-transform
规则后,可以再次给它自己的堆叠通过在 .test
(再次,因为它是定位的)上设置新的 z-index
要获得z-索引以您期望的方式工作,请确保
.test
和 .test:after
共享相同的堆栈上下文。问题是,你想要 .test
与transform一起旋转,但这样做意味着创建自己的堆叠上下文。幸运的是,在包装容器中放置 .test
,并且旋转它仍然允许它的孩子共享堆叠上下文,同时旋转两者。 -
这是您开始的: http:// jsfiddle。 net / fH64Q /
-
这里有一个方法可以解决堆栈上下文并保持
的旋转: http://jsfiddle.net/fH64Q/2/ (请注意,阴影会因为.test
的白色背景)
方法做到这一点,更好的方式甚至。我可能会使post-it背景包含元素,然后把文本放在里面,这可能是最简单的方法,并将减少你拥有的复杂性。
查看这篇文章有关 z-index
和堆叠顺序的详细信息,或关于堆叠上下文的工作W3C CSS3规范
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;
}
How do transform and z-index work together?
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. Here's what's going on:
Your .test
element has transform
set to something other than none, which gives it its own stacking context.
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.
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)!
So how do we solve your problem?
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.
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: http://jsfiddle.net/fH64Q/2/ (note that the shadow gets a bit cut off because of
.test
's white background)
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 article for more details about z-index
and stacking order, or the working W3C CSS3 spec on stacking context
这篇关于z-index通过设置transform(rotate)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!