CSS中z-index层叠顺序

CSS中z-index层叠顺序

一、什么是堆叠上下文

堆叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的 z 轴上延伸，HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。

二、CSS中z-index层叠顺序 （基于两个元素都没有形成 堆叠上下文 这个为基础）

即：（从低到高）

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: 的子堆叠上下文元素（正的越低越堆叠层级越低）

三、如何触发一个元素形成 堆叠上下文

1、根元素 (HTML),
2、z-index 值不为 "auto"的 绝对/相对定位，
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"的元素