问

通过设置变换(旋转)取消z-index

琦琦蔡外_734 发布于 2023-02-07 13:37

transform

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





  transform
  



  z-index is canceled.







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



        
        2 个回答
        
                        
                让我们来看看正在发生的事情.首先,请注意z-index在定位元素上,并在元素transform上创建新的" 堆叠上下文 ".这是发生了什么:

您的.test元素已transform设置为none以外的其他元素,这为其提供了自己的堆叠上下文.

然后添加一个.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>


                
                    2023-02-07 13:41  回答
                       秋梯田那路77
                
            

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

        
                
                    2023-02-07 13:41  回答
                       文逸博166293
                
            
                    

    

    
    
        撰写答案
        
            
                
                    回答问题...



    
    
        今天，你开发时遇到什么问题呢？
        立即提问
    

    
        热门标签