css层叠上下文和层叠水平

最新推荐文章于 2024-09-01 17:11:05 发布

可乐少点冰

最新推荐文章于 2024-09-01 17:11:05 发布

阅读量285

点赞数

分类专栏：个人总结 # 样式Css 文章标签： css

本文链接：https://blog.csdn.net/a8725585/article/details/104983607

版权

31 篇文章 0 订阅

订阅专栏

9 篇文章 0 订阅

订阅专栏

页面中当元素发生层叠时如何显示。为何有的元素明明写在后面却被前者覆盖住了？为何z-index设置很大了，还是不显示？这些涉及到css中的层叠上下文，层叠水平等

类似块级格式化上下文，是一个封闭的空间，用来限制内部元素的层叠水平在当前范围活动的。在同一个层叠上下文中，（元素、层叠上下文）的层叠水平按一定的规则排序、显示。

特性：
- 层叠水平比普通元素高
- 可嵌套，内部层叠上下文及其所有子元素受制于外部层叠上下文
- 与兄弟元素独立，只需考虑后代元素
- 自成体系，当元素发生层叠时，整个元素被认为是在福层叠上下文层叠顺序中
创建方式：
- 天生派: 根层叠上下文页面根元素天生就具有的 (<html>)
- 正统派: z-index为数值（默认为auto）的定位元素 (position为relative/absolute/fixed)
  - webkit内核中fixed 无需z-index为数值
- 扩招派: 其它css3属性
  - 1.flex布局，z-index不为auto
  - 2.元素的opacity值不为1
  - 3.元素的transform值不为none
  - 4.元素的mix-blend-mode值不为normal
  - 5.元素的filter值不为none
  - 6.元素的isolation值为isolate
  - 7.元素的will-change值为2~6的任意一个(will-change:opacity)
  - 8.元素的-webkit-overflow-scrolling值为touch