CSS深入理解z-index（z-index相关知识总结）

一、z-index基础内容（入门级掌握）

1.z-index含义：

z-index属性指定了元素及其子元素的【z顺序】，而【z顺序】可以决定当元素发生覆盖的时候，哪个元素在上面。通常一个较大z-index值的元素会覆盖较低的那一个

2.z-index支持的属性值：

3.z-index的特性：

4.特殊点：

如果不考虑CSS3，只有标记了定位元素position的z-index才有作用，但在CSS3中有例外

 

二、多个定位元素（应用级掌握）

1. 如果定位元素z-index没有发生嵌套：

①后来居上的准则；

②哪个大，哪个上；

①后来居上 （即默认按照dom元素排列的先后顺序，靠后的dom元素排列居上）：

 

②哪个大，哪个上（当设置有z-index的时候，按照z-index的值排列，值越大，越靠上）：

2. 如果定位元素z-index发生嵌套：

①祖先优先原则；

②特殊情况；

①祖先优先原则（当有外层包裹发生嵌套的时候，两个元素的层级比较依赖于祖先的z-index值大小）： 

 ②特殊情况（当z-index的值为auto时，当前层叠上下文的生成盒子层叠水平为0，盒子（除非是根元素）不会创建一个新的层叠上下文，因此内层的z-index:2;起了作用，在下文中，我们会对层叠上下文及层叠水平等内容进行详细介绍，稍安勿躁）：

 

三、理解CSS中的层叠上下文和层叠水平（进阶内容掌握）

1. 概念：

层叠上下文（stacking context）是HTML元素中的一个三维概念，标识元素在Z轴上有了“可以高人一等”。

•  页面根元素天生具有层叠上下文，称之为“根层叠上下文”。
• z-index值为数值的定位元素也具有层叠上下文。
• 其他属性

层叠上下文中的每个元素都有一个层叠水平（stacjing level），决定了同一个层叠上下文中元素在z轴上的显示顺序。

遵循“后来居上”和“谁上谁大”的原则。

层叠水平必须放在层叠上下文中来看，层叠水平和z-index并不是一个概念。

2. 层叠上下文的特性：

①层叠上下文可以嵌套，组合成一个分层次的层叠上下文。

②每个层叠上下文和兄弟元素独立：当进行层叠变化或渲染的时候，只需要考虑后代元素。

③每个层叠上下文是自成体系的：当元素的内容被层叠后，整个元素被认为是在父层的层叠顺序中。

3. 层叠水平：

①著名的7阶层叠水平（规范层叠，更符合页面加载的功能和视觉呈现）

4. Z-index 与层叠上下文：

①特性：

• 定位元素默认z-index:auto可以看成是z-index:0;
• z-index不为auto的定位元素会创建层叠上下文；
• z-index层叠顺序的比较止步于父级层叠上下文;

②为何定位元素会覆盖普通元素？

此时，右边的元素覆盖左边的元素，满足了基本的元素后来居上原则。 

可是当给左边元素添加定位属性的时候，该元素跑到了上方，这是为什么呢？可以思考一个问题，此时a元素的z-index值是什么呢？ 前面说过，如果z-index不做设置，当有定位属性的时候，默认为z-index:auto; 也就是z-index为0。而根据层叠水平规则，z-index:auto是在inline（图片）之上的，因此会反转覆盖。

③z-index与创建层叠上下文：

此时根据层叠水平规则， inline在block之上。

当给img添加z-index: -1的属性时，box跑到了img的前面，按理说根据层叠水平规则，z-index负值的层叠顺序在层叠上下文元素背景色之上，但看起来似乎有违规则，其实不然，这是因为，box只是普通元素，并不具备自身的层叠上下文，而普通元素的层叠规则在z-index:-1之上。

当继续给box添加z-index:0的属性时，此时图片的层叠上下文元素就变成了容器，img就又跑到了box的前面 ，虽然box的z-index大于img，但根据层叠水平规则，box的背景色（前提是具有容器的层叠上下文）会在img之下。

从层叠顺序上讲，z-index:auto;可以看成z-index:0;。但是从层叠上下文来讲，两者却有着本质差异！auto不会创建层叠上下文，但是0会创建。

④z-index受限于层叠上下文：

尽管box1的img的z-index很高，但是由于他的层叠上下文box1的z-index下雨box2的z-index，因此会处于下方。这就是z-index受限于层叠上下文的体现。 

5.其他CSS属性与层叠上下文

①其他CSS属性与层叠上下文总览

②display:flex与层叠上下文

 由于box不具有层叠上下文，因此img直接穿过box背景达到根元素的层叠上下文。

当给box添加flex属性的时候，情况翻转。这个并不能说是flex给box添加了层叠上下文而导致了这种情况，而是因为flex当前元素的子元素的z-index不为auto，因此让box具备层叠上下文。 

③opacity≠1与层叠上下文

可以看到当给box添加不等于1的opacity属性时，图片到了上方，这就说明，opacity≠1可以给元素添加层叠上下文。 

④transform的值不为none

因此说明，transform不为none的情况下会给box元素添加层叠上下文。

⑤mix-blend-mode≠normal与层叠上下文（同上）

⑥filter≠none与层叠上下文（同上）

⑦isolation:isolate与层叠上下文（同上） 

⑧position:fixed与层叠上下文（同上，但只有Chrome等blink/webkit内核浏览器会出现这类现象）

⑨will-change与层叠上下文（同上）

6.z-index与其他CSS属性层叠上下文

①不支持z-index的层叠上下文元素的层叠顺序均是z-index:auto级别

因此，上图是更为准确和详细的层叠规则。

②依赖z-index的层叠上下文元素的层叠顺序取决于z-index值

依赖z-index值创建层叠上下文的情况：

• position值为relative/absolute或fixed（部分浏览器）
• display:flex|inline-flex容器的子flex项 

 ③层叠上下文有趣的现象

opacity:1普通图片，其他opacity值则新建层叠上下文，层叠顺序z-index:auto级别，跟absolute文字一样，但遵循后来居上准则，于是，淡出的时候，文字是看不见的，直到动画结束（此时opacity值为1）

四、z-index相关实践（实践掌握） 

1.最小化影响原则

目的：

避免z-index嵌套层叠关系混乱

原因：

1.元素的层叠水平主要是由所在的层叠上下文决定；

2.IE7 z-index:auto也会新建层叠上下文；

做法：

1.避免使用定位属性；

2.定位属性从大容器平级分离为私有小容器；

2.不犯二准则

目的：

避免z-index混乱，一山比一山高的样式问题。

原因：

多人协作以及后期维护。

做法：

对于非浮层元素，避免设置z-index值，z-index值没有任何道理需要超过2——不犯二准则。

3.组件层级计数器

目的：

避免浮层组件因z-index被覆盖的问题。

原因：

1.总会遇到意想不到的高层及元素；

2.组件的覆盖规则具有动态性；

做法：

通过js获得body下子元素的最大z-index值

4.可访问性隐藏

概念：

人肉眼看不见，但是辅助设备可以识别。

做法：

使用z-index负值元素在层叠上下文的背景之上，其它元素之下。

此文为博主的学习总结，参考链接：https://www.imooc.com/video/11625