层叠顺序（stacking level）与堆栈上下文（stacking context）的

A.层叠顺数

元素的顺序除了z-index外，还接受其他因素的控制，也就是“7阶层叠水平”
↓1、形成堆叠上下文环境的元素的背景与边框

↓2、拥有负 z-index 的子堆叠上下文元素 （负的越高越堆叠层级越低）

↓3、正常流式布局，非 inline-block，无 position 定位（static除外）的子元素

↓4、无 position 定位（static除外）的 float 浮动元素

↓5、正常流式布局， inline-block元素，无 position 定位（static除外）的子元素（包括 display:table 和 display:inline ）

↓6、拥有 z-index:0 的子堆叠上下文元素

↓7、拥有正 z-index: 的子堆叠上下文元素（正的越低越堆叠层级越低）

看图片更加一目了然==>>
越往下，其展示的层级优先度就越高。

B.同样一个容易被人忽视的问题，则是堆栈上下文（stacking context）

堆叠上下文也是有顺序之分的，

会触发堆叠上下文属性的因素如下

1.根元素 (HTML),2.z-index 值不为 "auto"的 relative/absolute，
3.一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
4.opacity 属性值小于 1 的元素（参考 the specification for opacity），
5.transform 属性值不为 "none"的元素，
6.mix-blend-mode 属性值不为 "normal"的元素，
7.filter值不为“none”的元素，
8.perspective值不为“none”的元素，
9.isolation 属性被设置为 "isolate"的元素，
10.position: fixed
11.在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值
12.-webkit-overflow-scrolling 属性被设置 "touch"的元素   

如果没有给他们添加z-index属性，那么他们的层叠顺序就是按照他们在Dom文档流中的先后顺序进行排序的，越在前面的层级越高，越在后面的层级越低。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!