本文详细介绍了CSS中z-index属性的概念与使用方法，并解释了层叠上下文的创建方式及不同层叠水平间的相互关系。
z-index知识总结：
1、z-index的概念：z-index属性指定了元素及其子元素的z顺序，而z顺序可以决定当元素发生覆盖的时候，哪个元素在上，通常较大的z-index值的元素会覆盖值较低的那个。
2、z-index:auto;这是默认值
z-index:<integer>;
z-index:inherit;
3、z-index只对定位元素起作用；
例如：{position:static;z-index:2} 这是不起作用的；
4、html中的一个三维概念，如图：
人就相当于“皇帝”，皇帝越近，官职就越大；
5、层叠上下文（stacking context）概念：
如上图，就是在Z轴可以高人一等，可以离人更近；
简单描述：普通元素可以当官了，可以离皇上更近，覆盖其他元素。
哪些属性具有层叠上下文特性：
a、页面根元素<html>天生具有层叠上下文特性，称之为“跟层叠上下文”----皇亲国戚
b、如果一个定位元素的z-index属性值为数值时，该元素也具有了层叠上下文的特性
---科考入选。
c、其他属性：（同其他途径当官）
6、层叠水平：
层叠上下文的每个属性都有一个层叠水平，（也就是当官的家里的人，也要论资排辈），辈分决定了一个当官家族中（同一个层叠上下文）中谁离皇上最近，也就是在z轴上谁距离人最近。同一层级的遵循后来者居上，不同级的当然就是谁大谁上。
著名的七阶层叠水平：
为什么需要层叠顺序：规范元素在重叠时的呈现顺序。
为什么采取这种层叠顺序？这种层叠顺序更加符号页面加载的功能和视觉的呈现。
内容是整个网页上最重要的东西，所有它的层级水平最高。
层叠顺序：
a、不支持z-index的层叠上下文元素的层叠顺序均为z-index：auto级别；
b、依赖z-index的层叠上下文元素的层叠顺序取决于z-index值
依赖z-index值创建层叠上下文的情况：
1）position值为relative/absolute或fixed（部分浏览器）。
2）display：flex 或display:inline-flex容器的子flex项。
7、小总结点：
a、当定位元素没有设置z-index时，会默认为z-index：auto；可以看成auto：0；
b、z-indx不为auto的定位元素，会创建新的层叠上下文。
c、z-index层叠顺序的比较止步于父级层叠上下文。
8、除了z-index属性可以让普通元素变为层叠上下文元素外，还有一些属性也具有同样的功能。
a、display:flex;属性，但是要和它的子元素配合使用才可以。
.box{display:flex;background:blue;}
.box >div{z-index:1;}
b、opacity=/=1;透明度不为一的元素；如opacity:0.5;
c、transform不等于node时；
d、mix-blend-mode不等于normal；混合模式不正常时，mix-blend-mode:screen;
e、filter不等于none时，这是滤镜的意思，如filter:5px;
f、当isolation：isolate
g、position:fixed;只有在chrome等内核为wekit时才有用。
h、will-change：transform
i、webkit-overflow-scrolling;这是移动端特有的。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
