CSS知识点总结（五）

层叠上下文

一、什么是层叠上下文

每个DOM元素在渲染在浏览器中都有一个位置信息，x轴，y轴和z轴坐标，层叠上下文就是元素在某个层级上z轴的排列关系。
与BFC类似，层叠上下文之间不会互相影响。每个元素的层叠水平只有在同一个层叠上下文中才有比较的意义。
不同层叠上下文中的元素的层叠等级会受父层叠上下文层叠水平的影响。

二、形成层叠上下文的方法

• html元素
• position值为 absolute|relative，且 z-index值不为 auto
• position 值为 fixed|sticky
• z-index 值不为 auto 的flex元素，即：父元素 display:flex|inline-flex
• opacity 属性值小于 1 的元素
• transform 属性值不为 none的元素

这些非定位属性产生的层叠上下文的层叠水平对应的是7阶层叠水平中的 z-index：auto。

三、z-index

z-index 只适用于定位的元素，对非定位元素无效，它可以被设置为正整数、负整数、0、auto，如果一个定位元素没有设置 z-index，那么默认为auto；

元素的 z-index 值只在同一个层叠上下文中有意义。如果父级层叠上下文的层叠等级低于另一个层叠上下文的，那么它 z-index 设的再高也没用。所以如果你遇到 z-index 值设了很大，但是不起作用的话，就去看看它的父级层叠上下文是否被其他层叠上下文盖住了。

四、层叠顺序

参考博文：
[1]:https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/
[2]:https://www.cnblogs.com/leftJS/p/11063683.html
[3]:https://juejin.cn/post/6844903667175260174