Css zindex 通过设置 transform(rotate) 取消

发布于12月31日

利用变换性质，z索引被取消并出现在前面. (在注释out-webkit-change时，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本身在元素上创建了新的"stacking contexts".下面是正在发生的事情:

您的.test元素将transform设置为NONE以外的值，这为它提供了自己的堆栈上下文.

然后添加一个.test:after伪元素，它是.test的子元素.该子 node 具有z-index: -1，将堆栈级别设置为.test:after within the stacking context of 101将z-index: -1设置为.test:after不会将其放在.test之后，因为z-index仅在给定的堆栈上下文中有意义.

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

So how do we solve your problem?个

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

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

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

Css zindex 通过设置 transform(rotate) 取消

推荐答案

Css相关问答推荐

添加Angular 17的Stackblitz项目的Angular material 主题？

创建一个CSS动画的对角线线条.

当您到达页面底部时，如何使页脚 div 将附加的 div 向上推

SCSS - Lighten/Darken 不编译？

如何在变量中插入 SCSS 变量？

将框架放入 bootstrap 模式的正确方法是什么？

CSS中元素的重叠

tailwind css 中的自定义组状态

CSS Slanding Div 边缘在图像上

使用 CSS 填充悬停过渡的闪烁文本问题

在移动设备上touch 屏幕边缘的元素(Material UI)

位置绝对混乱的 CSS Flexbox

内联块在 Internet Explorer 7、6 中不起作用

如何设置表格单元格的最大高度？

使用 CSS3 生成重复的六边形图案

如何在渲染之前获取react 组件的大小(高度/宽度)？

什么是 DOM 回流？

如何保持标题静态，滚动时始终位于顶部？

带有一些 LESS 魔法的花式媒体查询

仅当将 Div 悬停在上方时才显示滚动条？