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

【问题标题】：z-index is canceled by setting transform(rotate)z-index 通过设置 transform(rotate) 取消
【发布时间】：2014-01-18 01:00:13
【问题描述】：

使用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>

transform 和 z-index 如何协同工作？

【问题讨论】：

这是我做的fiddle，你想用z-index隐藏文字吗？
工作正常jsfiddle.net/raunakkathuria/8MQkP 实际上有什么疑问？
感谢您制作小提琴。我想显示文本矩形后面的阴影（如便利贴）。

标签： css z-index transform

【解决方案1】：

对于那些仍在寻找解决方案的人，我发现这篇文章如何解决transform 和 z-index here 的问题

它的简单用法是这样做：

.parent { transform-style: preserve-3d; }
.parent:before { transform: translateZ(-1em); }

【讨论】：

【解决方案2】：

将你想要保持在顶部的 div 设置为 position:absolute

【讨论】：

【解决方案3】：

有一个类似的问题，兄弟姐妹被transform: translate()'d 和z-index 不起作用。

最直接的解决方案是在所有同级上设置position: relative，然后z-index 将再次起作用。

【讨论】：

【解决方案4】：

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

【讨论】：

它对我有用。它与上面提到的堆栈上下文有关吗？如果有人可以帮助澄清，将不胜感激。
也许是因为当你有一个相对（或绝对）的位置和一个 z-index 集时，会创建一个新的堆叠上下文？
谢谢！尝试为未从同一类中选择的元素设置 CSS 后，效果非常好！

【解决方案5】：

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

【讨论】：

这在我无法旋转容器的情况下对我有用
我遇到了一个奇怪的问题，没有观察到 z-index，然后应用样式 transform:rotate(0.0rad) 修复了它。我无法通过 css 规则应用它，它必须直接在元素上。这没有任何意义，但感谢您发布让我尝试的答案。

【解决方案6】：

我遇到了类似的问题。我所做的是，我在测试周围添加了一个包装器 div，并将转换属性赋予包装器 div。

.wrapper{
    transform: rotate(10deg);
}

这是小提琴http://jsfiddle.net/KmnF2/16/

【讨论】：

【解决方案7】：

让我们来看看正在发生的事情。首先，请注意z-index 在定位元素上，transform 本身会在元素上创建新的“stacking contexts”。这是发生了什么：

您的 .test 元素将 transform 设置为非无，这为其提供了自己的堆叠上下文。

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

当您从.test 中删除-webkit-transform 时，它会删除其堆栈上下文，导致.test 和.test:after 共享堆栈上下文（<html> 的堆栈上下文）并使.test:after 落后于.test。请注意，在删除.test 的-webkit-transform 规则后，您可以再次通过在.test 上设置新的z-index 规则（任何值）来为其提供自己的堆叠上下文（同样，因为它已定位）！

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

要让 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>

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

查看this article 了解有关z-index 和堆叠顺序的更多详细信息，或查看the working W3C CSS3 spec on stacking context

【讨论】：

这很好地解释了 CSS 布局中最复杂的方面之一。未来阅读，check the W3 spec