CSS基础：CSS的上下文之层叠上下文

￡神魔★判官ぃ 2022-11-03 04:26 258阅读 0赞

# CSS的上下文之层叠上下文 #

> 看到层叠，大家一定会联想到定位元素会是的元素之间发生“遮挡”，而z-index可以改变他们之间的遮挡优先级，但这仅仅是层叠这一概念中很小的一部分。  
> 本文就来聊一聊css中的层叠上下文到底是如何给元素规定叠加顺序的。

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

层叠上下文，英文称作”stacking context”. 我们假定用户正面向（浏览器）视窗或网页，而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。

我们可以把层叠上下文同样可以理解成是元素的属性。

下列方式会形成层叠上下文（列举常见的方式）：

*  position 值为 static 以外的值，且 z-index 值不为 auto;
 *  flex (flexbox) 容器的子元素，且 z-index 值不为 auto;
 *  grid (grid) 容器的子元素，且 z-index 值不为 auto;
 *  opacity 属性值小于 1 的元素;
 *  transform属性 不为none的元素;

**总结：**

在层叠上下文中，子元素同样也按照上面解释的规则进行层叠。 重要的是，其子级层叠上下文的 z-index 值只在父级中才有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70_pic_center]

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

“层叠水平”，英文称作”stacking level”，决定了同一个层叠上下文中元素在z轴上的显示顺序。网页中的每个元素都是独立的个体，他们一定是会有一个类似的排名排序的情况存在。而这个排名排序、论资排辈就是我们这里所说的“层叠水平”。

但注意，每一个层叠上下文内部的子元素都不会突破包裹它的上下文。

下面是引自张鑫旭大大的一段解释，我觉得很通俗易懂：

所有的元素都有层叠水平，包括层叠上下文元素，层叠上下文元素的层叠水平可以理解为官员的职级，1品2品，县长省长之类。然后，对于普通元素的层叠水平，我们的探讨仅仅局限在当前层叠上下文元素中。为什么呢？因为否则没有意义。

翻译成术语就是：普通元素的层叠水平优先由层叠上下文决定，因此，层叠水平的比较只有在当前层叠上下文元素中才有意义。

**举例：**

大家看下面的一段代码：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70]

**现象：**

在这个例子中，每个被定位的元素都创建了独自的层叠上下文，因为他们被指定了定位属性和 z-index 值。我们把层叠上下文的层级列在下面：

*  DIV \#1
 *  DIV \#2
 *  DIV \#3
    
     *  DIV \#4
     *  DIV \#5

不同层的z-index他们的意义只相对于同一个层叠上下文。你会发现z-index：100的也没有覆盖z-index：1的。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70_pic_center 1]

**结论：**

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

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

“层叠顺序”英文称作”stacking order”. 表示元素发生层叠时候有着特定的垂直显示顺序，注意，这里跟上面两个不一样，上面的层叠上下文和层叠水平是概念，而这里的层叠顺序是规则。

在CSS2.1的年代，在CSS3还没有出现的时候（**注意这里的前提**），层叠顺序规则遵循下面这张图（同样是引自张大大的旧图）：

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

#### 4.1 准则 ####

*  谁大谁上：当具有明显的层叠水平标示的时候，如识别的z-indx值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。通俗讲就是官大的压死官小的。
 *  后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。  
    在CSS和HTML领域，只要元素发生了重叠，都离不开上面这两个黄金准则。因为后面会有多个实例说明，这里就到此为止。

#### 4.2 特性 ####

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

讲到这里我们对层叠上下文应该有了一定理解，我们共勉～

## 写在最后 ##

**参考：**

*  [MDN][]
 *  [深入理解CSS中的层叠上下文和层叠顺序][CSS]

CSS基础系列》第四篇文章

如果对你有所帮助不妨给本项目的[github 点个 star][github _ star]，这是对我最大的鼓励！

**关于我**

*  花名：余光
 *  WX：j565017805
 *  沉迷 JS，水平有限，虚心学习中

**其他沉淀**

*  [Github: Js版LeetCode题解][Github_ Js_LeetCode]
 *  [前端进阶笔记][Link 1]
 *  [CSS 基础][CSS 1]

![yuguang-csdn-bottom.gif][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/925474b6037f4ad0a966581183a44ca5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70]: /images/20221024/8c28a30a553645fd9025e50327e4d751.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221024/18280e79115f49b08e2417adc056ec79.png
[MDN]: https://developer.cdn.mozilla.net/zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
[CSS]: https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/
[github _ star]: https://github.com/webbj97/summary
[Github_ Js_LeetCode]: https://webbj97.github.io/leetCode-Js/
[Link 1]: https://webbj97.github.io/summary/
[CSS 1]: https://blog.csdn.net/jbj6568839z/category_7944500.html
[yuguang-csdn-bottom.gif]: /images/20221024/cdf55018933049aab77c19f29eb3391d.png