堆叠顺序
- background
- border
- 块级
- 浮动
- 内联
- z-index: 0
- z-index: +
如果是兄弟元素重叠,那么后面的盖在前面的身上。
触发堆叠上下文
- 根元素 (HTML),
- z-index 值不为 “auto”的 绝对/相对定位,
- 一个 z-index 值不为 “auto”的 flex 项目 (flex item),即:父元素 display: flex|inline-flex,
opacity
属性值小于 1 的元素(参考 the specification for opacity),transform
属性值不为 “none”的元素,mix-blend-mode
属性值不为 “normal”的元素,filter
值不为“none”的元素,perspective
值不为“none”的元素,isolation
属性被设置为 “isolate”的元素,position: fixed
- 在
will-change
中指定了任意 CSS 属性,即便你没有直接指定这些属性的值(参考 这篇文章) -webkit-overflow-scrolling
属性被设置 “touch”的元素
在层叠上下文中,其子元素同样也按照上面解释的规则进行层叠。 特别值得一提的是,其子元素的 z-index 值只在父级层叠上下文中有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。