层叠顺序
在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
属性.