层叠上下文 + 层叠顺序【CSS 知识汇点4】

282 阅读2分钟

当网页内容发生层叠时,一定会有一个前后的层叠顺序产生,有点类似于真实世界中论资排辈的感觉。

概念解析

层叠上下文

层叠上下文,英文是“stacking context”。假定用户正面向网页,而 html 元素沿着其相对于用户的一条虚线的z轴排开,层叠上下文就是 HTML 中的一个三维概念。

层叠水平

层叠水平,英文是“stacking level”,决定了同一个层叠上下文中元素在z轴上的显示顺序。层叠水平的比较只在当前层叠上下文元素中才有意义。

层叠顺序

层叠顺序,英文是“stocking order”, 表示元素发生层叠时,有着特定的垂直显示顺序,具体顺序是(从高到低):

  1. 正 z-index
  2. z-index:auto 或看成 z-index: 0 不依赖 z-index 的层叠上下文
  3. inline/inline-block 水平盒子(内容)
  4. float 盒子
  5. block 块状水平盒子(布局)
  6. 负 z-index
  7. background/border(装饰)

层叠准则

当元素发生层叠时候,其覆盖关系遵循下面两个准则:

  • 谁大谁上,当具有明显的层叠水平标志时(如识别的z-index),在同一个层叠上下文领域,层叠水平值大的覆盖小的。
  • 后来居上,当层叠水平值一致、层叠顺序相同时,在 dom 后来的元素会覆盖前面的元素

层叠上下文的特性

层叠上下文有如下特性:

  • 层叠上下文的层叠水平要比普通元素高
  • 层叠上下文可以阻断元素的混合模式
  • 层叠上下文可以嵌套,内部层叠上下文及其所有子元素均受制于外部的层叠上下文
  • 每个层叠上下文和兄弟元素独立
  • 每个层叠上下文是自成体系的,当元素发生层叠时,整个元素被认为时在父层叠上下文的层叠顺序中。

创建层叠上下文

创建层叠上下文的三个方式:

  • 跟元素天生是层叠上下文
  • z-index 值为数值的定位元素的传统层叠上下文:position 的值不是 static 的元素,当 z-index **不是 auto **时,就会自动创建层叠上下文(z-index是0也会创建)
  • css3 一些方法:
    • z-index 不为 auto 的 flex 项

    • 元素的 opacity 值不是 1

    • transform !== none

    • isolation === isolate

    • will-change 指定的属性为上面任意一个

    • 元素的 -webkit-overflow-scrolling = touch