层叠上下文和层叠顺序

柔情只为你懂 2021-07-04 18:02 480阅读 0赞

## 前言 ##

原文是在前面对`transform引起的z-index“失效”`探究过程中找到的，非常棒，所以转载分享。本文大多摘自原文，进行了压缩，也加入了我自己的理解，希望对大家有帮助。

默认情况下，网页内容是没有偏移角的垂直视觉呈现，当内容发生层叠的时候，一定会有一个前后的层叠顺序产生。

我们大家可能都熟悉CSS中的z-index属性，需要跟大家讲的是，z-index实际上只是CSS层叠上下文和层叠顺序中的一叶小舟。

## 一、什么是层叠上下文 ##

层叠上下文，英文称作“`stacking context`”。是HTML中的一个三维的概念。如果一个元素含有层叠上下文，我们可以理解为这个元素在z轴上“高人一等”。

### z轴 ###

表示的是用户与屏幕的这条看不见的垂直线：  
![在这里插入图片描述][20200519133010820.png]

### 具象化 ###

拥有层叠上下文的元素相当于是一个容器，容器里装着其他元素。  
不同容器内的元素的高低由容器决定。容器里面的元素，有高低之分，但不会突破容器。

## 二、什么是层叠水平 ##

“层叠水平”英文称作”`stacking level`”，决定了同一个层叠上下文中元素在`z`轴上的显示顺序。

就跟人一样，网页中的元素虽然都是独立个体，但是总有一个类似的排名排序的情况存在。这个就是层叠水平。层叠上下文的层叠水平是优先级更高的层叠水平。

**普通元素的层叠水平优先由层叠上下文决定，因此，层叠水平的比较只有在当前层叠上下文元素中才有意义。**

> 注意：千万不要把层叠水平和`z-index`属性混为一谈。某些情况下`z-index`确实可以影响层叠水平，但是，只限于定位元素以及`flex`盒子的子元素，而层叠水平所有的元素都存在。

## 三、什么是层叠顺序 ##

“层叠顺序”英文称作”`stacking order`”，表示元素发生层叠时的垂直显示顺序。层叠上下文和层叠水平是概念，而这里的层叠顺序是规则。

在CSS2.1的年代，在CSS3还没有出现的时候（注意这里的前提），层叠顺序规则遵循下面这张图：  
![在这里插入图片描述][20200519133818719.png]  
这样的设计是由元素的重要性出发的，内容优于布局，布局优于装饰

注意：

1.  这是css2的时候
2.  这里的`z-index: 0` 只是表示一个`0`级别，对应的是`z-index: auto`，没有创建层叠上下文的级别

## 四、层叠准则 ##

层叠领域的黄金准则。当元素发生层叠的时候，其覆盖关系遵循下面2个准则：

*  **谁大谁上**  
    当具有明显的层叠水平标示的时候，如识别的`z-indx`值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。
 *  **后来居上**  
    当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

## 五、层叠上下文的特性 ##

层叠上下文元素有如下特性：

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

## 六、层叠上下文的创建 ##

层叠上下文基本是由一些特定的css属性所创建，主要分为三种：

### 1. 根层叠上下文 ###

**页面根元素**，也就是滚动条的默认的始作俑者`<html>`元素。这就是为什么，绝对定位元素在`left/top`等值定位的时候，如果没有其他定位元素限制，会相对浏览器窗口定位的原因。

### 2. 定位元素与传统层叠上下文 ###

设置`position:relative/position:absolute`，`z-index`值不是`auto`的定位元素  
设置`position:fixed`的定位元素，`z-index`为任意

### 3. CSS3与新时代的层叠上下文 ###

*  设置了`z-index`，且不为`auto`的`flex`元素(父元素`display:flex|inline-flex`)
 *  设置了`opacity`，且不为`1`的元素
 *  设置了`transform`，且不为`none`的元素
 *  设置了`mix-blend-mode`值，且不为`normal`的元素
 *  设置了`isolation`，且为`isolate`的元素
 *  设置了`filter`值，且不是`none`的元素
 *  `will-change`指定的属性值为上面任意一个
 *  设置了`-webkit-overflow-scrolling`，且为`touch`的元素

## 七、层叠上下文与层叠顺序 ##

最终的层叠顺序分两种情况讨论：

*  层叠上下文不依赖`z-index`数值，其层叠顺序是`z-index: auto`，就是`z-index: 0`的级别，没有创建层叠上下文的元素的级别
 *  层叠上下文依赖`z-index`数值，则由`z-index`决定  
    也就是两个层叠准则的详细解释，第一个：后来者居上，第二个：谁大谁上。

![在这里插入图片描述][20200519135102838.png]

[20200519133010820.png]: /images/20210704/28fa5b5376d4480db8996268b2a22505.png
[20200519133818719.png]: /images/20210704/096a4b428f584b0b85baa6b26f954ffa.png
[20200519135102838.png]: /images/20210704/81e127ed71f948378c99f717fc1e7058.png