通过设置transform（rotate）取消z-index
使用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在定位的元素上，并单独在元素上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在包装容器中并旋转，这仍将允许其子级共享堆叠上下文，同时也旋转它们。
-
这是一种可以绕开堆叠上下文并保持旋转的方法（请注意，由于
.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="test">z-index is canceled.</div>
还有其他方法可以做到这一点，甚至还有更好的方法。我可能会将“ post-
it”背景作为包含元素，然后将文本放入其中，这可能是最简单的方法，并且可以减少所拥有内容的复杂性。
-
设置方法：我-设置-消息通知设置
-
问题内容： 由于某些原因 在Safari 11中显示为未旋转。 Chrome 63可以正确呈现它。 有什么问题？ 谢谢！ 问题答案： 在SVG 1.1中，元素不支持转换属性。在SVG2中，建议它们应该。 Chrome和Firefox实现了SVG 2规范的这一部分，而Safari尚未实现，而IE11则从未实现。 在不支持SVG2功能的浏览器中，可以通过用元素替换元素或在元素上创建子元素并将转换放在元
-
14:52:46.692[pool-1-thread-12]信息EndtoEnditTests-设置版本时间1548062566687 14:52:46.693[pool-1-thread-6]信息EndtoEnditTests-设置版本时间1548062566687 14:52:46.693[pool-1-thread-20]信息EndtoEndittest-设置版本时间154806256668
-
问题内容： 更新资料 很抱歉未能添加次要细节，我们也使用来将许多元素叠加在一起。处理更多此问题之后，似乎实际上与排序混乱，并且实际问题与动画本身无关。 结束更新 我目前在一个项目中，我们在该项目中开发了一个非常注重CSS3动画的应用程序。我们在和周围围绕了许多元素。 一切都很好，直到今天页面的所有要动画的元素都消失了。看来Google Chrome已从 12.xx 更新到 13.0.782.107
-
问题内容： 我可以通过Java代码本身以编程方式设置java.library.path吗？ 以下无效。 问题答案： 不，你不能。此属性是只读值。您可以在JVM启动时通过以下方式更改它： 如果要从特定位置加载库，则可以使用System.load（libraryPath）代替库的完整路径。
-
问题内容： 有没有一种方法可以使用户在tinyMCE编辑器中轻松更改段落的行高属性？像它的本机“字体大小”或“格式”之类的东西。我知道我可以使用“编辑CSS”功能并在那里进行设置。我正在寻找更人性化的东西。 我在任何地方都找不到。 问题答案： 像这样设置： 您也可以像这样配置不同的高度： 我对此进行了测试，效果很好。