跳到主要内容

层叠

2023年02月15日
柏拉文
越努力，越幸运

一、认识​

二、规则​

所谓层叠规则，指的是当网页中的元素发生层叠时的表现规则。

注意
  1. CSS3中，z-index已经并非只对定位元素有效，flex盒子的子元素也可以设置z-index属性。

2.1 认识层叠上下文​

层叠上下文Stacking Context是HTML中一个三维概念，如果一个元素含有层叠上下文，可以理解这个元素在Z轴上高人一等。

2.2 层叠上下文的特性​

  • 层叠上下文的层叠水平要比普通元素高

  • 层叠上下文可以阻断元素的混合模式

  • 层叠上下文可以嵌套，内部层叠上下文及其所有元素均受制于外部的层叠上下文

  • 每个层叠上下文和兄弟元素独立

  • 当进行层叠变化或渲染的时候，只需要考虑后代元素

  • 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中

2.3 层叠上下文的创建​

由一些CSS属性创建:

  • 天生派:

    • 页面根元素天生具有层叠上下文

    • 根层叠上下文: 指的是页面根元素,页面中所有的元素一定处于至少一个层叠结界中

  • 正统派:

    • z-index 值为数值的定位元素的传统层叠上下文: 对于position值为relative/absolute的定位元素,当z-index值不是auto的时候，会创建层叠上下文。

  • 扩招派:

    • 元素为flex布局元素(父元素display:flex|inline-flex),同时z-index值不是auto的flex布局

    • 元素的opactity值不是1 - 透明度opactity

    • 元素的transform值不是none - 转换transform

    • 元素mix-blend-mode值不是normal - 混合模式mix-blend-mode

    • 元素的filter值不是none - 滤镜filter

    • 元素的isolation值是isolate - 隔离isolation

    • 元素的will-change属性值为上面②~⑥的任意一个（如will-change:opacity）

    • 元素的-webkit-overflow-scrolling设为touch

三、顺序​

层叠顺序, 英文称作Stacking Order，表示元素发生层叠时有着特定的垂直显示顺序。下面是盒模型的层叠规则:

Preview

由上图所示,由上到下分别是:

  1. 背景和边框: 建立当前层叠上下文元素的背景和边框

  2. 负的z-index: 当前层叠上下文中，z-index属性值为负的元素

  3. 块级盒: 文档流内非行内级非定位后代元素

  4. 浮动盒: 非定位浮动元素

  5. 行内盒: 文档流内行内级非定位后代元素

  6. z-index:0: 层叠级数为0的定位元素

  7. 正z-index: z-index属性值为正的定位元素

注意: 当定位元素z-index:auto，生成盒在当前层叠上下文中的层级为 0，不会建立新的层叠上下文，除非是根元素。

3.1 认识层叠顺序​

一旦普通元素具有层叠上下文,其层叠顺序就会变高,分两种情况:

  1. 如果层叠上下文元素不依赖z-index数值，则其层叠顺序是z-index:auto。可看成z-index:0

  2. 如果层叠上下文元素依赖z-index数值，则其层叠顺序由z-index值决定

定位元素会层叠在普通元素的上面？

根本原因就是: 元素一旦成为定位元素, 其z-index就会自动生效,其z-index就是默认的auto。不支持·z-index·的层叠上下文元素天然是·z-index:auto·级别,层叠上下文元素和定位元素是一个层叠顺序的。