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 值只在父级中才有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。

二、什么是层叠水平？

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

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

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

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

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

举例：

大家看下面的一段代码：

现象：

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

DIV #1
DIV #2
DIV #3
- DIV #4
- DIV #5

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

结论：

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

三、什么是层叠顺序？

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

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

四、层叠上下文的特性

4.1 准则

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

4.2 特性

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

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

写在最后

参考：

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

CSS基础系列》第四篇文章

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

关于我

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

其他沉淀

Github: Js版LeetCode题解
前端进阶笔记
CSS 基础

CSS基础：CSS的上下文之层叠上下文相关推荐

CSS基础——CSS样式的引入和规则【学习笔记】
1.引入CSS样式表(书写位置) 行内式(内联样式) 内部样式表(内嵌样式表) 外部样式表(外链式) (1)行内式(内联样式) 概念: 称行内样式.行间样式. 是通过标签的style属性来设置 ...
CSS基础——CSS 三大特性【学习笔记】
1 CSS层叠性概念: 所谓层叠性是指多种CSS样式的叠加. 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉原则: 样式冲 ...
CSS基础——CSS复合选择器【学习笔记】
复合选择器后代选择器并集选择器 CSS选择器分为基础选择器和复合选择器 ,但是基础选择器不能满足我们实际开发中,快速高效的选择标签. 目的是为了可以选择更准确更精细的目标元素标签. 复合选择 ...
css基础 CSS 导航栏、CSS 下拉菜单
阅读目录导航栏导航栏=链接列表垂直导航栏垂直导航条实例激活/当前导航条实例创建链接并添加边框全屏高度的固定导航条水平导航栏内联列表项浮动列表项水平导航条实例链接右对齐添加分割 ...
CSS基础——CSS 列表和表单【学习笔记】
CSS 列表和表单 1. 列表标签(重点) 表格是用来显示数据的,列表是用来布局的. 概念: 容器里面装载着结构,样式一致的文字或图表的一种形式,叫列表特点: 列表最大的特点就是整齐 .整洁. 有 ...
CSS基础——CSS字体样式属性【学习笔记】
CSS字体样式属性调试工具 font字体 CSS外观属性快捷操作emmet语法练习案例-体育页面 1.font字体 1.1 font-size:大小作用: font-size属性用于设置字号 p ...
CSS基础——CSS 背景(background)【学习笔记】
1 背景颜色(color) 语法: background-color:颜色值; 默认的值是 transparent 透明的 2 背景图片(image) 语法: background-image : n ...
前端基础CSS+html篇 2w字吐血总结
前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色.从狭义上讲,前端工程师使用 HTML.CSS.JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端.移动 ...
前端入门之CSS基础
CSS基本语法基本语法: css规则由选择器和一条或多条声明两个部分构成: 选择器通常是需要改变样式的HTML元素: 每条声明由一个属性和一个属性值组成: 属性和属性值被冒号分隔开. 引入方式 4种 ...

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