层叠顺序
在css2.1时代, 堆叠顺序遵循下面这张图.
图片来自这里
层叠上下文
满足一下条件的任意元素就会形成堆叠上下文.
- 根元素 (HTML)
-
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- 在
will-change中指定了任意CSS属性.