一开始学习的时候真的觉得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