当网页内容发生层叠时,一定会有一个前后的层叠顺序产生,有点类似于真实世界中论资排辈的感觉。
概念解析
层叠上下文
层叠上下文,英文是“stacking context”。假定用户正面向网页,而 html 元素沿着其相对于用户的一条虚线的z轴排开,层叠上下文就是 HTML 中的一个三维概念。
层叠水平
层叠水平,英文是“stacking level”,决定了同一个层叠上下文中元素在z轴上的显示顺序。层叠水平的比较只在当前层叠上下文元素中才有意义。
层叠顺序
层叠顺序,英文是“stocking order”, 表示元素发生层叠时,有着特定的垂直显示顺序,具体顺序是(从高到低):
- 正 z-index
- z-index:auto 或看成 z-index: 0 不依赖 z-index 的层叠上下文
- inline/inline-block 水平盒子(内容)
- float 盒子
- block 块状水平盒子(布局)
- 负 z-index
- 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
-