css – z-index通过设置transform(rotate)

使用transform属性，z-index被取消并出现在前面。
(当注释掉-webkit-transform时，z-index在下面的代码中正常工作)

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;
}

变换和z-index如何一起工作？

解决方法

让我们来看看发生了什么。要开始，请注意定位元素上的z-index，并通过自身转换在元素上创建新的“ stacking contexts”。下面是发生了什么：

你的.test元素的transform设置为非none，这给它自己的堆栈上下文。

然后在伪元素后面添加.test：。它是.test的子元素。这个孩子有z-index：-1，在.test的堆栈上下文中设置.test的堆栈级别：设置z-index：.test：after不会放在.test因为z-index only在给定的堆叠上下文中具有含义。

当从.test删除-webkit-transform时，它删除它的堆栈上下文，导致.test和.test：在共享一个堆栈上下文(< html>)之后和.test：后面。注意，在删除.test的-webkit-transform规则之后，你可以通过在.test上再次设置一个新的z-index规则(任何值)，给它自己的堆栈上下文。

那么我们如何解决你的问题呢？

要使z-index以预期的方式工作，请确保.test和.test：共享相同的堆栈上下文。问题是，你想要.test与transform一起旋转，但这样做意味着创建自己的堆叠上下文。幸运的是，将.test放在一个包装容器中并且旋转将仍然允许它的孩子共享一个堆叠上下文，同时也旋转两者。

>这是你开始的：http://jsfiddle.net/fH64Q/
>这里有一个方法可以绕过堆栈上下文并保持
旋转：http://jsfiddle.net/fH64Q/2/(请注意，阴影由于.test的白色背景而有一点被切断)

还有其他方法来做到这一点，更好的方式甚至。我可能会使“post-it”背景包含元素，然后把文本放在里面，这可能是最简单的方法，并将减少你所拥有的复杂性。

有关z-index和堆叠顺序的详细信息，请参阅this article或the working W3C CSS3 spec on stacking context

css – z-index通过设置transform(rotate)

解决方法

猜你在找的CSS相关文章