深入理解CSS定位中的堆叠z-index

今天药忘吃喽~ 2021-06-26 16:06 374阅读 0赞

## 前面的话 ##

对于所有定位，最后都不免遇到两个元素试图放在同一位置上的情况。显然，其中一个必须盖住另一个。但，如何控制哪个元素放在上层，这就引入了属性`z-index`

## 定义 ##

利用`z-index`，可以改变元素相互覆盖的顺序。这个属性的名字由坐标系统得来，其中从左向右是x轴，从上到下是y轴。从屏幕到用户是z轴。在这个坐标系中，较高`z-index`值的元素比较低`z-index`值的元素离用户更近，这会导致较高`z-index`值的元素覆盖其他元素，这也称为堆叠或叠放

**`z-index`**

值: `<integer> | auto | inherit`

初始值: `auto`

应用于: 定位元素

继承性: 无

\[注意\]`z-index`应用于定位元素是`CSS2`的规范，到了`CSS3`标准，`z-index`的应用范围扩大了不少

\[注意\]所有整数都可以作为`z-index`的值，包括负数。如果为元素指定一个负`z-index`值，会将其移到离读者更远的位置，会移到叠放栈的更低层

## 堆叠规则 ##

对于`CSS2.1`来说，页面元素的堆叠规则如下图所示:  
![在这里插入图片描述][20190629180337340.png]  
**定位元素的堆叠规则**

\[1\]对于定位元素(`position`不是`static`的元素)来说，不设置`z-index`或`z-index`相同时，后面元素覆盖前面元素

\[2\]对于处于同一堆叠上下文中的同一层次的元素来说，默认`z-index`较大值覆盖`z-index`较小值  
![在这里插入图片描述][20190629184023697.png]

## 堆叠上下文 ##

一旦为一个元素指定了`z-index`值(不是`auto`)，该元素会建立自己的局部堆叠上下文。这意味着，元素的所有后代相对于该祖先元素都有其自己的叠放顺序

\[注意\]`auto`值指当前堆叠上下文中生成的栈层次与其父框的层次相同，这个框不会建立新的局部叠放上下文。`z-index:auto`与`z-index:0`的值相等，但`z-index:0`会建立新的局部堆叠上下文

**默认样式**

.box1{ z-index: 1;}
    .box2{ z-index: auto;}
    .list1{ z-index: 2;}
    .list2{ z-index: 1;}
    #one{ z-index: -1;}
    #two{ z-index: 1;}
    #three{ z-index: 0;}
    #four{ z-index: auto;}
    #five{ z-index: 2;}
    #six{ z-index: 1;}
    #seven{ z-index: 2;}
    #eight{ z-index: -1;}

//堆叠顺序
    .box1                  1
    .box1 .list1           1,2
    .box1 .list1 #one      1,2,-1
    .box1 .list1 #two      1,2,1
    .box1 .list1 #three    1,2,0
    .box1 .list1 #four     1,2,auto
    .box1 .list2           1,1
    .box1 .list2 #five     1,1,2
    .box1 .list2 #six      1,1,1
    .box2                  auto
    .box2 #seven           auto,2
    .box2 #eight           auto,-1

\[注意\]`auto,2`和`auto,-1`相当于`2`和`-1`，因为`auto`代表未产生堆叠上下文。则`#seven`和`#eight`相当于和它们的父级`.box2`以及`.box1`处于同一层次  
![在这里插入图片描述][20190629184134855.png]  
元素不会叠放在其堆叠上下文(即定位父级`z-index`为数字值)的背景之下，但可以叠放在其内容之下；当元素没有处于堆叠上下文中，元素不会叠放在`<body>`元素的背景之下，但可以叠放在其内容之下  
![在这里插入图片描述][20190629184157653.png]

## 兼容 ##

【1】IE7-浏览器`z-index`的默认值是`0`

一般地，定位元素的`z-index`的默认值是`auto`，而IE7-浏览器定位元素的`z-index`的默认值是`0`，二者的区别于IE7-浏览器的定位元素会自动生成堆叠上下文

div{ 
        position: absolute;
        border: 1px solid black;
    }    
    .div1{ 
        width: 300px;
        height: 100px;
        background-color: pink;
        z-index: 1;
    }
    .div2{ 
        background-color: lightgreen;
        top: 50px;
        left: 50px;
        width: 200px;
        height: 200px;
    }
    .in2{ 
        width: 100px;
        height: 150px;
        background-color: lightblue;
        z-index: 2;
        border: none;
    }

一般地，`div1`的堆叠顺序为`1`;`div2`的堆叠顺序为`auto`;`in2`的堆叠顺序为`auto`,`2`相当于`2`。所以覆盖层次为`in2` 覆盖 `div1` 覆盖 `div2`。但在IE7-浏览器中，`div1`的堆叠顺序为`1`;`div2`的堆叠顺序为`0`;`in2`的堆叠顺序为`0,2`。所以覆盖层次为`div1` 覆盖 `in2` 覆盖 `div2`

左边为其他浏览器图示，右边为IE7-浏览器图示  
![在这里插入图片描述][20190629184939731.jpg]  
![在这里插入图片描述][20190629185011446.jpg]  
【2】IE6-浏览器关于`z-index`的一个怪异`bug`

当元素本身浮动且不是定位元素(`position`不是`static`)，元素父级是`relative`，则在IE6-浏览器在无论该元素的父级的`z-index`如何设置都不起作用

.div1{ 
        position: absolute;
        z-index: 1;
        width: 100px;
        height: 100px;
        background-color: pink;
    }
    .box{ 
        position: relative;
        z-index:2;
    }
    .div2{ 
        float: left;
        width: 150px;
        height: 50px;
        background-color: lightgreen;
    }

左边是IE6浏览器结果，右边是其他浏览器结果  
![在这里插入图片描述][20190629185319200.jpg]  
![在这里插入图片描述][20190629185329345.jpg]

**解决方法**

\[1\]元素去除浮动  
\[2\]父级元素的相对定位改成绝对定位  
\[3\]元素添加`position`属性(`static`除外)

以上三个方法任一方法都可以，其实就是在破坏`bug`成立的条件

【3】IE6-浏览器下`select`的`z-index`无效而遮挡`div`

IE6-浏览器下`select`设置`z-index`无效，且默认会堆叠在`div`上

.box{ 
        left: 30px;
        z-index:2;
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: pink;
    }
    select{ 
        width: 100px;
        position: absolute;
        z-index:1;
    }

左边是IE6浏览器结果，右边是其他浏览器结果  
![在这里插入图片描述][2019062919013462.png]  
**解决方法**

在IE6-浏览器中，虽然`div`无法覆盖`select`，但是`iframe`可以`select`。所以可以设置一个与`div`宽高相同的`iframe`。让`div`覆盖`iframe`，`iframe`覆盖`select`，最终达到`select`被`div`覆盖的效果

iframe{ 
        left: 30px;
        position: absolute;
        width: 100px;
        height: 100px;
        z-index: 2;
    }

## CSS3 ##

CSS3的出现对过去的很多规则发出了挑战。对层叠上下文`z-index`的影响更加显著，主要包括以下8个属性

1、`z-index`值不为`auto`的`flex`项(父元素`display:flex | inline-flex`)  
2、元素的透明度`opacity`值不等于`1`  
3、元素的变形`transform`不是`none`  
4、元素的`mix-blend-mode`值不是`normal`  
5、元素的`filter`值不是`none`  
6、元素的`isolation`值是`isolate`  
7、`will-change`指定的属性值为上面的任意一个  
8、元素的`-webkit-overflow-scrolling`设置为`touch`  
9、元素的`mask`属性不是`none`

设置以上9个属性的任意一个，都和设置`absolute`类似，层叠上下文`z-index`会生效。下面以`opacity`透明度为例，进行说明  
![在这里插入图片描述][2019062919152986.png]

[20190629180337340.png]: /images/20210626/503b9543ca0949b9b42829bbdef1bd29.png
[20190629184023697.png]: /images/20210626/8917c7c8dc924cb6b849e765e931df86.png
[20190629184134855.png]: /images/20210626/432391158243477cad16ce2226dcffc4.png
[20190629184157653.png]: /images/20210626/67ecbe58fc2b4fee88dac6c3e2328337.png
[20190629184939731.jpg]: /images/20210626/b3cc49edcdb84a14953dbc45dab076ed.png
[20190629185011446.jpg]: /images/20210626/224931dce920434b9d06fe30aecffbd8.png
[20190629185319200.jpg]: /images/20210626/2b35ffc6f43c4b039e1a55f16500c266.png
[20190629185329345.jpg]: /images/20210626/f958981a84734118820f794520191722.png
[2019062919013462.png]: /images/20210626/5ffb5f28969a400e9a367fb51ebc75dc.png
[2019062919152986.png]: /images/20210626/92e459007692449ab5775e8f104e75c8.png