深入z-index

作者: Artifacts | 来源:发表于2019-12-04 15:19 被阅读0次

深入z-index
前端css层叠顺序与堆栈上下文
z-index深入了解
z-index学习
z-index的理解
z-index属性
z-index属性的理解
CSS深入理解之z-index 笔记
z-index 须知
搞懂Z-index的所有细节

涉及“层叠顺序（stacking order）”，“层叠上下文（stacking context）”，“层叠水平（stacking level）”。

z-index可以设置成三个值：

auto，默认值。当设置为auto的时候，当前元素的层叠级数是0，同时这个盒不会创建新的层级上下文（除非是根元素，即<html>）；
<integer>。指示层叠级数，可以使负值，同时无论是什么值，都会创建一个新的层叠上下文；
inherit。父元素继承

<style>
    #box1{
        background: blue;
        width: 200px;
        height: 200px;
    }
    #box2{
        background: yellow;
        width: 200px;
        height: 200px;
        margin-top:-100px;
    }
       
</style>
<div id="box1"></div>
<div id="box2"></div>

如果要box1要显示在box2上面，给box1加一个z-index大于0的值这样是不对的，如图:

box2遮挡了box1，即使box1设置z-index值再大也没有用，z-index只在定位元素（position=static除外，因为元素默认就是static，相当于没用position样式）中作用，也是就z-index要配合position一起使用。

层叠顺序对绝对元素的Z轴顺序

层叠顺序其实不是z-index独有的，每个元素都有层叠顺序，元素渲染的先后顺序跟它有很大关系，总之当元素发生层叠时，元素的层级高的会优先显示在上面，层级一样的则会根据dom的先后顺序进行渲染，后面的会覆盖前面的。文字再多可能也没有一张图来的直接，下面这张图是“七阶层叠水平”

在不用z-index的前提下，利用css层叠顺序解决遮挡问题，代码修改如下：

<style>
    #box1{
        background: blue;
        width: 200px;
        height: 200px;
        display:inline-block;
    }
    #box2{
        background: yellow;
        width: 200px;
        height: 200px;
        margin-top:-100px;
    }
       
</style>
<div id="box1"></div>
<div id="box2"></div>

给box1加了一个display:inline-block;的样式，首先box1和box2发生了层叠，然后box默认为块级元素，即display：block，从七阶图中看出，display：block的元素的层叠水平低于display：inline-block的元素，所以浏览器就将box2渲染到box1上面，如图：

重点：层叠上下文

先说一下如果创建层叠上下文，css创建层叠上下文的方法有很多，但是常用的也就够那么几种

定位元素中z-index不等于auto的会为该元素创建层叠上下文
html根元素默认会创建层叠上下文
元素的opacity不等于1会创建层叠上下文
元素的transform不等于none会创建层叠上下文

层叠上下文作用：

这里一定要结合前面那张七阶图，最下面那一层background便是是建立在层叠上下文的基础上的，也就是说在层叠上下文中，所有的元素都会渲染在该元素的层叠上下文背景和边框上面；在block盒子、float盒子等不存在层级上下文的元素中，子元素设置z-index为负值的时候，那么子元素会被父元素遮挡。

<style>
    #box1{
        position: relative;
        width: 200px;
        height: 200px;
        background: blue;
    }
    #box2{
        position: relative;
        z-index:-1;
        width: 100px;
        height: 100px;
        background: yellow;
    }
</style>

<div id="box1">
      <div id="box2"></div>
</div>

这里，box1并没有创建层叠上下文，它的子元素box2所在的层叠上下文还是根元素。这里box2设置z-index:-1，box1的z-index:auto，因为box1和box2在同一个层叠上下文中，根据七阶图可以看出，box2的层叠水平小于box1，所以box1会绘制在box2上面。如图所示：

为box1建立一个层叠上下文，那么box2中的元素无论z-index是负的多少，都会显示在box1的背景之上，如图：

这里我用了前面说的的第一种方式去创建层叠上下文，即定位元素中z-index不为auto的元素会建立层叠上下文，box1的z-index大于box2的z-index，为什么box2缺显示在box1的上面呢？

层叠水平仅在直接父级层叠上下文中进行比较，即层叠上下文A中的子元素的层叠水平不会和另一个层叠上下文中的子元素进行比较。

<style>
    #box1{
        z-index: 10;
        position: relative;
        width: 200px;
        height: 200px;
        background: green;
    }
    #box1_1{
        position: relative;
        z-index: 100;
        width: 100px;
        height: 100px;
        background: blue;
    }
    #box2{
        position: relative;
        z-index: 11;
        width: 200px;
        height: 200px;
        background: red;
        margin-top: -150px;
    }
</style>

<div id="box1">
    <div id="box1_1">    
    </div>
</div>

<div id="box2">
 
</div>

层叠上下文box1中的子元素box1_1设置z-index为100，而层叠上下文box2的z-index只有11，而实际的渲染效果却是，box2在box1和box1_1的上面，这就应了上面那就话，层叠水平仅在元素的第一个父级层叠上下文中进行，即层叠上下文A中的子元素的层叠水平不会和另一个层叠上下文中的子元素进行比较，也就是box1_1的z-index对于他的父级层叠上下文之外的元素没有任何影响。这里box2和box1在同一个层叠上下文中（html根元素会默认创建层叠上下文），所以它们两个会进行层叠水平的比较，box2的z-index大于box1的z-index，所以我们看到的也就是下面这样，box2遮挡了box1，不在乎box1中的子元素z-index是多少，如图：