通过设置transform（rotate）取消z-index

  • Z时代
  • 2024-01-10
  • 分类：问答

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

设置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”背景作为包含元素，然后将文本放入其中，这可能是最简单的方法，并且可以减少所拥有内容的复杂性。

以上是 通过设置transform（rotate）取消z-index 的全部内容， 来源链接： utcz.com/qa/429917.html

回到顶部