层叠上下文、z-index

[vesseler]

首先，层叠代表的是z轴

关于层叠的顺序

为什么定位元素会层叠在普通元素的上面

元素一旦成为定位元素，其z-index 就会自动生 效，此时z-index: auto 也就是0级别， 根据上 面的层叠顺序表，就会覆盖inline或block或 float元素。 而不支持z-index的层叠上下文元素天然zindex:auto级别，层叠上下文元素和定位元素是 一个层叠顺序的，于是当他们发生层叠的时候， 遵循的是“后来居上”准则

---

层叠上下文创建

层叠上下文相对于非层叠上下文会显示在z轴更上方，也就是在屏幕上看会覆盖非层叠上下文的元素

1.根层叠上下文（html） 2.定位元素 (非 static) 和z-index (非 auto) z-index属性值并不是在任何元素上都有效果。它仅在定位元素（定义了position属性，且属性值为非static值的元素）上有效果。

CSS3新属性对层叠上下文影响

• 父元素的display属性值为flex|inline-flex，子元素z-index属性值不为auto的时候，子元素为层叠上下文元素；元素的opacity属性值不是1；
• 元素的transform属性值不是none；
• 元素mix-blend-mode属性值不是normal`；
• 元素的filter属性值不是none；
• 元素的isolation属性值是isolate；
• will-change指定的属性值为上面任意一个；
• 元素的-webkit-overflow-scrolling属性值设置为touch。

只要满足上述，即可创建层叠上下文。

https://blog.csdn.net/llll789789/article/details/97562099