对于css中z-index的深入理解

一开始学习的时候真的觉得css的z-index十分简单，直到今天我有一丝丝想要用它的时候处处碰壁，才发现原来并不是自己想的那样。

首先我们需要知道z-index只对定位元素有作用（static除外）。

遵循的准则为：

z-index并列时：1、后来居上准则（没有设置z-index的值）。2、谁大谁上准则（设置z-index的值之后）.

z-index嵌套时：1、祖先优先的原则（当z-index时数值不能是auto）2、祖先后来居上原则（并列的祖先后来的）

　

层叠水平：

层叠上下文中的每个元素都有一个层叠水平，决定了同一个层叠上下文中元素在Z轴上的显示顺序

层叠上下文中七种层叠等级

举个例子：

注意：层叠水平和z-index不是一个东西。普通元素也有层叠水平，z-index只在定位元素上起作用。：

层叠上下文的几个特性：

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

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

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

z-index与层叠上下文（看成根元素）

1、行为要点：

1>定位元素默认（也就是z-index：auto）可以看成是z-index：0；（但是一旦设置了数值便是重新创建了一个层叠上下文）；

2>z-index不为auto的定位元素会创建层叠上下文。（如果容器的z-index没有设置数值，而里面的图片设置了z-index数值，那么此时图片的层叠上下文为根元素，单数如果容器z-index设置了数值，则创建了新的层叠上下文，那么图片的层叠上下文则为容器）

当然还有其他的一些参与层叠上下文的属性们：

具体的可以查看：https://www.cnblogs.com/benbendu/p/5811534.html

最后是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值

灵感资料等来自（会根据之后的实践学习等再作出补充）：

https://www.cnblogs.com/benbendu/p/5811534.html

https://webdesign.tutsplus.com/zh-hans/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892