z-index和层叠上下文

发表于

一、层叠上下文、层叠等级和层叠顺序

  1. 层叠上下文(stacking context)

    层叠上下文是HTML中一个三维的概念。在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的X轴，Y轴以及表示层叠的Z轴。

    一般情况下，元素在页面上沿X轴Y轴平铺，我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。

  1. 层叠等级(stacking level，层叠级别/层叠水平)
    • 在同一个层叠上下文中，它描述定义的是该层叠上下文中的层叠上下文元素在Z轴上的上下顺序。

    • 在其他普通元素中，它描述定义的是这些普通元素在Z轴上的上下顺序。

    • 普通元素的层叠等级优先由其所在的层叠上下文决定。

    • 层叠等级的比较只有在当前层叠上下文元素中才有意义;不同层叠上下文中比较层叠等级是没有意义的。

二、z-index

  1. 定义

    z-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order (元素的层叠顺序)。 当元素之间重叠的时候， z-index 较大的元素会覆盖较小的元素在上层进行显示（MDN）。

    z-index 属性设置一个定位元素沿 z 轴的位置。z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。 （w3school）

    • 默认值：auto

    • 继承性：no

    • 版本：CSS2

    • JS 语法：object.style.zIndex=”1” （auto|number）

    • 生效：position: absolute/relative/fixed/sticky

    • 浏览器支持：所有主流浏览器都支持 z-index 属性。

      注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。

  1. 取值
    1
    z-index: auto|number|initial|inherit;

    | 值 | 描述 |
    | :——- | :————————— |
    | auto | 默认。堆叠顺序与父元素相等。 |
    | number | 设置元素的堆叠顺序。 |

  • auto (当一个定位元素不设置z-index的时候，默认值就是auto)

    ​ 盒子不会创建一个新的本地层叠上下文。在当前层叠上下文中生成的盒子的层叠层级和父级盒子相同。

  • number

    ​ number（整型数字）是生成的盒子在当前层叠上下文中的层叠层级。此盒子也会创建一个层叠层级为 0 的本地层叠上下文。

    ​ 这意味着后代（元素）的 z-indexes 不与此元素的外部元素的 z-indexes 进行对比。

  1. 规则

    对于一个已经定位的盒子（元素），z-index 属性指定：

    • 盒子在当前层叠上下文中的层叠层级。

    • 盒子是否创建一个本地层叠上下文

同级 指的是同一个层叠上下文。当给z-index设置值的时候就会创建层叠上下文，不同的层叠上下文看最外层的z-index值。

具体来说，如果A的z-index比B的z-index小，那么A元素里面的其他元素无论设置多大的值也无法覆盖B里面的元素。

  • 同级 下，z-index的值越大，层叠顺序越靠前，相同的z-index值的时候，后面的会在前面的层级之上。z-index的值是可以设置0和负数的。

  • 同级 下，z-index: 0 的层级比auto高

注意：A元素(子元素A1)，兄弟元素B(子元素B1)。

  • 若 A: 0，B: 1 （A < B）

    • A1 < B

    • A1 < B1

  • 若 A: auto，A1 > B （A1直接可以跟B比）

    • A1 > B1

  • 若A: auto，A1: -1

    • A1 < A

  • 若A: integer

    • A1 > A