大家好，我是讯享网，很高兴认识大家。

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

1.z-index 含义

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

2.z-index 支持的属性值

• z-index:auto; 默认值
• z-index:int； 整数值
• z-index:inherit;继承父元素的z-index属性值

3.z-index的特性

• 支持负值
• 支持css3 animation动画
• 在css2.1时代，需要和定位元素配合使用

4.特殊点

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

{ 
    position：static;z-index:2; } { 
    position：relative;z-index:2; } { 
    position：absolute;z-index:2; } { 
    position：fixed;z-index:2; } { 
    position：sticky;z-index:2; } 

讯享网

static:元素使用正常的布局行为，即元素在文档常规流中当前的布局位置

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

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

讯享网 .one { 
    position: absolute; top: 0; left: 0; width: 200px; height: 200px; background-color: #ccc; } .two { 
    position: absolute; top: 50px; left: 50px; width: 300px; height: 300px; background-color: pink; } <div class="one">one</div> <div class="two">two</div> 

讯享网

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

 .one { 
    position: absolute; top: 0; left: 0; width: 200px; height: 200px; background-color: #ccc; z-index: 2; } .two { 
    position: absolute; top: 50px; left: 50px; width: 300px; height: 300px; background-color: pink; z-index: 1; } <div class="one">one</div> <div class="two">two</div> 

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

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

讯享网 .parent-one { 
    position: relative; z-index: 2; } .one { 
    position: absolute; top: 0; left: 0; width: 200px; height: 200px; background-color: #ccc; z-index: 1; } .parent-two { 
    position: relative; z-index: 1; } .two { 
    position: absolute; top: 50px; left: 50px; width: 300px; height: 300px; background-color: pink; z-index: 2; } <div class="parent-one"> <div class="one">one</div> </div> <div class="parent-two"> <div class="two">two</div> </div> 

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

 .parent-one { 
    position: relative; z-index: auto; } .one { 
    position: absolute; top: 0; left: 0; width: 200px; height: 200px; background-color: #ccc; z-index: 2; } .parent-two { 
    position: relative; z-index: 1; } .two { 
    position: absolute; top: 50px; left: 50px; width: 300px; height: 300px; background-color: pink; z-index: 1; } <div class="parent-one"> <div class="one">one</div> </div> <div class="parent-two"> <div class="two">two</div> </div> 

②特殊情况（当z-index的值为auto时，当前层叠上下文的生成盒子层叠水平为0，盒子（除非是根元素）不会创建一个新的层叠上下文，因此内层的z-index:2;起了作用）

三、理解css 中的层叠上下文和层叠水平（进阶）

1.概念

我们假定用户正面向（浏览器）视窗或网页，而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间（可高人一等）

哪些元素具有层叠上下文呢？？？

层叠水平：

层叠上下文中的每个元素都有一个层叠水平（stacjing level），决定了同一个层叠上下文中元素在z轴上的显示顺序。
遵循“后来居上”和“谁大谁上”的原则。
层叠水平必须放在层叠上下文中来看，层叠水平和z-index并不是一个概念。

3. 层叠水平：

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

为什么是这样的排序？？？

内容是页面中最重要的实体，所以，层叠水平高。

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

①特性：

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

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

讯享网.a{ 
    } .b{ 
   margin-left:-30px} 

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

.a{ 
   position:relative} z-index? .b{ 
   margin-left:-30px} 

如果z-index不做设置，当有定位属性的时候，默认为z-index:auto; 也就是z-index为0。而根据层叠水平规则，z-index:auto是在inline（图片）之上的，因此会反转覆盖。
3）z-index与创建层叠上下文：

讯享网.box{ 
    position: absolute; background: blue; } .img{ 
    position: relative; margin-left: -100px; } 

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

.box{ 
    position: absolute; background: blue; z-index:0; } .img{ 
    position: relative; margin-left: -100px; z-index:-1; } 

box添加z-index:0的属性时，此时图片的层叠上下文元素就变成了容器,box的背景色（前提是具有容器的层叠上下文）会在img之下
④z-index受限于层叠上下文：

讯享网.box1{ 
    position: relative; z-index:0; } .box1 img{ 
    position: absolute; z-index:9999; } .box2{ 
    position: relative; z-index:1; } .box2 img{ 
    position: absolute; z-index: -1; } 

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

• 文档根元素（）；
• position 值为 absolute（绝对定位）或 relative（相对定位）且 z-index 值不为 auto 的元素；
• position 值为 fixed（固定定位）或 sticky（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）；
• flex (flex) 容器的子元素，且 z-index 值不为 auto；
• grid (grid) 容器的子元素，且 z-index 值不为 auto；
• opacity 属性值小于 1 的元素（参见 the specification for opacity）；
• mix-blend-mode 属性值不为 normal 的元素；
• 以下任意属性值不为 none 的元素：
  • transform
  • filter
  • backdrop-filter
  • perspective
  • clip-path
  • mask / mask-image / mask-border
• isolation 属性值为 isolate 的元素；
• will-change 值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素（参考这篇文章）；
• contain 属性值为 layout、paint 或包含它们其中之一的合成值（比如 contain: strict、contain: content）的元素。

 .box{ 
    background:'blue'; } .box>div { 
    z-index：1 } .box>div>img{ 
    position:relative; z-index:-1; } <div class="box"> <div> <img src="1.jpg" /> </div> </div> 

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

讯享网.box{ 
    display:flex; background:'blue'; } .box>div { 
    z-index：1 } .box>div>img{ 
    position:relative; z-index:-1; } <div class="box"> <div> <img src="1.jpg" /> </div> </div> 

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

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

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

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

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

1.最小化影响原则

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

原因：
1.元素的层叠水平主要是由所在的层叠上下文决定；
做法：
1.避免使用定位属性；

2.不犯二准则

目的：
避免z-index混乱，一山比一山高的样式问题。
原因：
多人协作以及后期维护。
做法：
对于非浮层元素，避免设置z-index值，z-index值没有任何道理需要超过2——不犯二准则。

3.组件层级计数器

目的：
避免浮层组件因z-index被覆盖的问题。
原因：
1.总会遇到意想不到的高层及元素；
2.组件的覆盖规则具有动态性；

做法：

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

4.可访问性隐藏

概念：
人肉眼看不见，但是辅助设备可以识别。
做法：
使用z-index负值元素在层叠上下文的背景之上，其它元素之下。