跳到主要内容

原理-层叠上下文

层叠上下文(stacking context), 是HTML中的一个三维的概念. 如果一个元素含有层叠上下文, 我们可以理解为这个元组的z轴上具有先后关系.

层叠上下文是一个概念, 和块状格式化上下文BFC类似.

层叠水平​

层叠水平(stacking level), 决定了同一个层叠上下文中元素在Z轴上的显示顺序.

所有的元素都具有层叠水平, 包括层叠上下文元素.

对于普通元素而言, 则只讨论局限在当前层叠上下文元素.

换句话说: 普通元素的层叠水平优先由层叠上下文决定, 因此, 层叠水平的比较只有在当前层叠上下文元素中才有意义.

注意: 层叠水平和CSS的z-index不是一回事. 某些情况下z-index确实可以影响层叠水平, 但是只限于定位元素以及flex盒子的孩子元素; 而层叠水平所有的元素都存在.

层叠顺序​

层叠顺序(stacking orider): 表示元素发生层叠时候有特定的垂直显示顺序.

注意: 层叠上下文和层叠水平是概念, 层叠顺序是规则.

image

这张图中有几个点需要注意:

  1. 位于最低水平的border/background指的是层叠上下文的边框和背景色. 每一个层叠顺序规则适用于一个完整的层叠上下文元素
  2. inline-block和inline水平元素是同级的
  3. z-inde:0和z-index:auto单纯从层叠水平上看, 是可以看成一样的. 但是实际上, 两者在层叠上下文领域有这根本性的区别. 4.border/background元素一般都是装饰属性, 而浮动和块状元素一般作为布局, 内容元素都是内容. 往往内容是网页的最重要的部分, 所以会让内容的层叠顺序尽可能的高.

层叠准则​

  1. 谁大谁上: 当具有明显的层叠水平标识的时候, 如生效的z-index属性值, 在同一个层叠上下文领域, 层叠水平值大的覆盖小的那一个
  2. 后来居上: 当元素的层叠水平一致, 层叠顺序相同的时候, 在DOM流中处于后面的元素覆盖前面的元素

层叠上下文的特性​

  • 层叠上下文的层叠水平要比普通元素高
  • 层叠上下文可以阻断元素的混合模式
  • 层叠上下文可以嵌套, 内部曾得上下文及其所有子元素均受制于外部的层叠上下文
  • 每个层叠上线文和兄弟元素独立, 也就是说, 当进行层叠变化或者渲染的时候, 只需要考虑后代元素
  • 每个层叠上下文是自成体系的, 当元素发生层叠的时候, 整个元素被认为是在福层叠上下文的层叠顺序中

层叠上下文的创建​

和块状上下文一样, 层叠上下文也基本上是由一些特定的CSS属性创建的. 层叠上下文的创建有这么几种

  1. 根层叠上下文: 由html根元素创建
  2. 普通层叠上下文: z-index值为数值的定位元素创建
  3. 其他层叠上下文: 由其他css3属性创建的层叠上下文

CSS3的层叠上下文​

  1. 元素为flex布局(父元素display:flex|inline-flex), 同时z-index值不是auto
  2. 元素的opacity值不是1
  3. 元素的transform值不是none
  4. 元素mix-blend-mode值不是normal
  5. 元素的filter值不是none
  6. 元素的ioslation值是isolate
  7. 元素的will-change属性值为2-6任意一个
  8. 元素的-webkit-overflow-scrolling设为touch

层叠上下文与层叠顺序​

一旦普通元素具有了层叠上下文, 其层叠顺序就会变高

  1. 如果层叠上下文不依赖z-index数值, 则层叠顺序是z-index:auto, 可以看做z-index:0级别
  2. 如果层叠上下文依赖z-index, 则层叠顺序由z-index值决定

参考链接​