z-index负值深入理解

分手后的思念是犯贱 2022-05-21 11:57 166阅读 0赞

补充点小知识：

CSS3与新时代的层叠上下文：

css3之前，可能我们说会影响层叠上下文的也就position属性了，那CSS3时代的到来，对层叠上下文规则带来了新的影响，css3时代会影响层叠上下文的除了定位还有：

*  元素为flex布局元素（父元素display:flex|inline-flex），同时z-index值不为auto
 *  元素的opacity值不是1
 *  元素transform值不是none
 *  元素的filter值不是none

除了上面的还有别的，这里暂时先提这些哈！

其实我以前没有考虑过z-index负值的情况，也没有用上过，但了解过之后，发现有些时候，z-index设置为负值也还挺好用的，所以自己就查了一些资料，现在整理出来

z-index为负值的最终表现并不一致，它与“层叠上下文”和“层叠顺序”密切相关

层叠上下文和层叠顺序：（下图是来自参考张鑫旭大神的7阶层叠顺序图）

![70][]

在上图中我们也可以看出z-index负值元素的层级是在层叠上下文元素上面、block元素的下面，也就是说z-index虽然名为负数层级，但依然无法突破当前层叠上下文所包裹的小世界

嗯，然后我们看个小例子：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .box{
                background:url("3.jpg");
            }
        </style>
    </head>
    <body>
    <div class="box box1" style="width:200px; height:100px; margin-bottom:10px; ">
        <img  title="胡歌" src="0.jpg" style="width:200px; height:100px; position:relative; z-index:-1; left:150px;"/>
    </div>
    
    <div class="box box2" style="width:200px; height:100px;opacity:0.8;">
        <img title="胡歌" src="0.jpg" style="width:200px; height:100px; position:absolute; z-index:-1; left:150px;"/>
    </div>
    </body>
    
    </html>

在上面的例子中，box1没有创建层叠上下文，而box2我们为其添加了opacity:0.8,根据我前面补充的知识，它是会创建层叠上下文的，所以我们看最后的呈现结果如下图：

![70 1][]

默默的图是背景图，胡歌的图是div的子元素

从上面的图中我们可以明显的看到，第一张是背景图在上面，而第二个是背景图在下，这也就和上面的层叠顺序图相符，即z-index负值应该在层叠上下文元素的背景色之上

注：我测试了为box2设置position:relative;去让box2创建层叠上下文，但此时背景图还是在上面，并不能达到上面的效果，我想了想，推测是因为我们之前说过，当我们为元素设置为定位（除position:static外），即便我们不为其添加z-index值，它的默认值也为z-index:auto;所以看上面的层叠顺序表也就好解释为什么了

那z-index负值在实际项目中有什么用呢？

*  可访问性隐藏

z-index负值可以隐藏元素，只需要层叠上下文内的某一个父元素加个背景色就可以。它与clip隐藏想必的一个优势是：元素无须绝对定位，设置position:relative就可以隐藏，另一个优势是它对原来的布局以及元素的行为没有任何影响。而clip隐藏会导致空间focus的焦点发生细微的变化，在特定条件下是有体验问题的。它的不足之处就是不具有普遍适用性，需要其他元素配合进行隐藏。

*  定位在元素的后面：

看一个模拟纸张效果的例子：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>边角效果</title>
        <style>
            .box{
               background-color: #666;
                width:300px;
                height:200px;
                position: relative;
                z-index: 0;
            }
            .content{
                width:100%;
                height:100%;
                background-color: #e15671;
                position: relative;
            }
            /*边角卷边阴影*/
          .content:before,.content:after{
              content: '';
              width:90%;
              height:20%;
              box-shadow:0 8px 16px rgba(0,0,0,.3);
              position: absolute;
              z-index: -1;
          }
            .content:before{
                transform: skew(-15deg) rotate(-5deg);
                transform-origin: left bottom;
                left:0;
                bottom: 0;
            }
            .content:after{
                transform: skew(15deg) rotate(5deg);
                transform-origin: right bottom;
                right: 0;
                bottom: 0;
            }
        </style>
    </head>
    <body>
    <div class="box">
        <div class="content">donna</div>
    </div>
    
    </body>
    
    </html>

效果图如下：

![70 2][]

[70]: /images/20220521/6d0809ad71754013b131bb147be162bb.png
[70 1]: /images/20220521/9f65dd0282634d5ab4434a7e3f0ffa13.png
[70 2]: /images/20220521/acd1fd5924b94d74b741828bef7943fe.png