层叠上下文：z-index

最新推荐文章于 2024-09-19 17:42:53 发布

wheng9667

最新推荐文章于 2024-09-19 17:42:53 发布

阅读量170

点赞数

分类专栏：前端 css 文章标签： css 前端

本文链接：https://blog.csdn.net/wheng9667/article/details/100926550

版权

12 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

每一个网页都有一个默认的层叠上下文。这个层叠上下文（桌子）的根源就是 <html></html>： html标签中的一切都被置于这个默认的层叠上下文的一个层叠层上

在层叠上下文中，其子元素按照上面解释的规则进行层叠。形成层叠上下文的方法有：

根元素 <html></html>
position值为 absolute|relative，且 z-index值不为 auto
position 值为 fixed|sticky
z-index 值不为 auto 的flex元素，即：父元素 display:flex|inline-flex
opacity 属性值小于 1 的元素
transform 属性值不为 none的元素
mix-blend-mode 属性值不为 normal 的元素
filter、 perspective、 clip-path、 mask、 mask-image、 mask-border、 motion-path 值不为 none 的元素
perspective 值不为 none 的元素
isolation 属性被设置为 isolate 的元素
will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值
-webkit-overflow-scrolling 属性被设置 touch的元素