层叠上下文
如果我们假定用户正面向（浏览器）视窗或网页，而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。
层叠上下文的创建
文档中的层叠上下文由满足以下任意一个条件的元素形成：
- 文档根元素（
<html>） position为abosolute或relative且z-index不为autoposition为fixed或stickyflex容器的子元素grid容器的子元素opacity小于1的元素mix-blend-mode不为normal的元素- 以下任意属性不为
none的元素transformfilterbackdrop-filterperspectiveclip-pathmark/mark-image/mark-border
isolation为isolate的元素contain属性值为layout、paint或包含它们其中之一的合成值
在层叠上下文中，子元素同样可以创建层叠上下文。并且子级层叠上下文的z-index仅在父层叠上下文中才有意义。
z轴叠放规则
不含z-index的层叠
元素按照如下顺序自底向上层叠
- 根元素的背景和边界
- 文档流中的元素按
HTML中出现顺序层叠 - 定位元素按
HTML出现顺序堆叠
使用z-index
对设置了z-index的同一层叠上下文中的子元素，按z-index大小从小到大排列，当没有指定z-index时，所有元素被渲染在第0层
position: fixed元素定位容器
当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。
