CSS 最佳实践 + 套路(三) -- 堆叠上下文
条件
文档中的层叠上下文由满足以下任意一个条件的元素形成:
- 根元素(HTML)
- z-index 不为 auto 的 absolute/relative
- 一个 z-index 值不为 auto 的 flex 项目,即父元素 display: flex/inline-flex
- opacity 属性值小于 1 的元素
- transform 属性不为 none 的元素
- mix-blend-mode 属性值不为 normal 的元素
- filter 不为 none 的元素
- perspective 值不为 none 的元素
- isolation 属性被设置为 isolate 的元素
- position: fixed
- 在 will-change 中指定了任意 CSS 属性,即使没有直接指定这些属性的值
- -webkit-overflow-scrolling 属性被设置为 touch 的元素
#堆叠层级:
1 |
负z-index(父元素没有position: relative/absolute) < position: static(background-color < border < 负z-index(父元素position: relative/absolute) < div/块级元素 < 浮动元素 < 浮动元素内的文字/内联元素 < 浮动元素外面的文字/内联元素) < position: relative/absolute < 正z-index |
- 相同的属性按先后顺序排列
- 具有相同
position
属性的 +z-index
只能覆盖相同position
属性(relative === absolute
)的元素
作用 + 影响
堆叠上下文主要是影响 z-index
z-index: 2
永远在 z-index:
0
的上方么?
最佳实践 & 套路
z-index
需要配合 position:
relative | absolute
使用
©
版权声明:本文为博主原创文章,未经博主允许不得转载。