层叠上下文
什么是层叠上下文？
在z轴上延伸出一个层级，离父级层叠上下文的顶部更近。
如何产生层叠上下文？
- 根元素具有根层叠上下文
- z-index不为”auto”的定位元素
- 一个 z-index 值不为 “auto”的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
-
opacity属性值小于 1 的元素， -
transform属性值不为 “none”的元素， -
mix-blend-mode属性值不为 “normal”的元素， -
filter值不为“none”的元素， -
perspective值不为“none”的元素， -
isolation属性被设置为 “isolate”的元素， -
position: fixed（Chrome等webkit内核浏览器） - 在
will-change中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考 这篇文章） -
-webkit-overflow-scrolling属性被设置 “touch”的元素
什么是层叠水平？
层叠上下文中的每个元素都有一个层叠水平，决定同一个层叠上下文中的元素在z轴上的显示顺序。遵循“后来居上”和“谁大谁上”的层叠原则。
层叠顺序
一个层叠上下文内，元素发生层叠时候有着特定的垂直显示顺序，也就是下图显示的层叠规则
- 层叠上下文的background/border（装饰层）
- 负z-index的依赖z-index层叠上下文元素
- 块状盒子（布局）
- float浮动盒子（布局）
- inline/inline-block水平盒子（内容）
- z-index为auto/z-index为0的依赖z-index层叠上下文元素或不依赖z-index的层叠上下文
- 正z-index的依赖z-index层叠上下文元素
关于“依赖z-index的层叠上下文”
创建层叠上下文的方式前文已列出，定位元素以及父元素为flex定位的元素，必须依赖z-index值才能创建层叠上下位，所以统称为依赖z-index的层叠上下文元素。而其他属性即不依赖z-index的层叠上下文。
z-index和层叠上下文
- 默认z-index: auto相当于是z-index: 0但不会产生层叠上下文
- z-index只对依赖z-index的层叠上下文元素起作用
- z-index不为auto的定位元素会创建层叠上下文
- z-index层叠顺序的比较止步于父级层叠上下文
https://codepen.io/curlywater…
第一组，蓝色盒子设置opacity:0.8;z-index:2，红色盒子设置transform，证明z-index对不依赖z-index的层叠上下文元素无效
第二组，蓝色盒子relative，红色盒子flex的子元素，两者都未设置z-index，未产生层叠上下文，红色盒子父级为块状盒子，蓝色盒子为z-inedx为auto的层叠上下文元素
第三组，蓝色盒子relative，红色盒子flex的子元素，两者都z-index: 0，产生层叠上下文，后来居上
z-index实践经验
- 非浮层元素避免设置z-index值（可以通过更改DOM顺序，创建层叠上下文来代替），z-index值不需要超过2
- 使用负z-index实现可访问性隐藏
