通过设置transform(rotate)取消z-index


84

使用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-index如何一起工作?


这是我做的小提琴,您要隐藏带有z-index的文本吗?
Surjith SM 2013年

工作正常jsfiddle.net/raunakkathuria/8MQkP实际有什么疑问?
Raunak Kathuria,2013年

谢谢您的摆弄。我想显示文本矩形后面的阴影(如便利贴)。
kbth 2013年

Answers:


140

让我们逐步了解正在发生的事情。首先,请注意z-index在定位的元素上,并单独在元素上transform创建新的“堆栈上下文”。这是怎么回事:

您的.test元素transform设置为非空,这为其赋予了自己的堆叠环境。

然后,添加一个.test:after伪元素,它是的子元素.test。这孩子z-index: -1,设置的栈级别.test:after 的堆叠范围内.test 设置z-index: -1.test:after没有把它放在后面.test,因为z-index只有具有给定的堆叠上下文中的含义。

当您-webkit-transform从中.test删除它时,将删除其堆栈上下文,从而导致.test.test:after共享一个堆栈上下文(的堆栈上下文<html>)并使其.test:after落后.test。请注意,删除.test-webkit-transform规则后,您可以再次通过为其设置新z-index规则(任何值)来为其赋予其自身的堆叠上下文.test

那么我们如何解决您的问题呢?

要使z-index以您期望的方式工作,请确保该设置.test.test:after共享相同的堆栈上下文。问题是您想.test通过变换旋转,但这样做意味着创建自己的堆栈上下文。幸运的是,将其放置.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>

还有其他方法可以做到这一点,甚至还有更好的方法。我可能会将“ post-it”背景作为包含元素,然后将文本放入其中,这可能是最简单的方法,并且可以减少所拥有内容的复杂性。

请查看本文,以获取有关z-index堆栈顺序的更多详细信息,或有关堆栈上下文的有效W3C CSS3规范


4
这很好地解释了CSS布局的最复杂方面之一。为了将来阅读,请查看W3规范
AndyBean

11

将您要保留在顶部的div设置为 position:relative


1
它为我工作。它与上面提到的堆栈上下文有关吗?如果有人可以帮助澄清,将不胜感激。
glihm

7

还有一个类似的问题,即兄弟姐妹正在工作transform: translate()z-index无法工作。

最直接的解决方案是position: relative对所有同级对象进行设置,然后z-index再次使用。


5

快速修复:您也可以将另一个元素旋转0度。


在无法旋转容器的情况下,这对我
很有用

1
我遇到一个奇怪的问题,即未观察到z-index,然后应用transform:rotate(0.0rad)固定的样式。我无法通过CSS规则应用它,它必须直接在元素上。这没有任何意义,但是感谢您发布让我尝试的答案。
安德鲁·谢泼德


-1

设置要停留在顶部的div位置:绝对

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.