[TOC]
## 概述
层叠上下文是HTML元素的三维概念，这些HTML元素在一个假象的相对于面向（电脑屏幕的）视窗或网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。
<br>
## 创建层叠上下文
* 根元素（**HTML**）
* **z-index** 值不为 "**auto**" 的**相对/绝对定位**
* 一个 **z-index** 值不为 "auto" 的 **flex** 项(flex item)，即：父元素display: flex | inline-flex
* **opacify** 属性值小于 1 的元素
* **transform** 属性值不为 "**none**" 的元素
* **mix-blend-mode** 属性值不为"**normal**"的元素
* **isolation** 属性被设置为 "**isolate**" 的元素
* **position: fixed**
* 在 **will-change** 中指定了任意CSS属性，即使你没有直接指定这些属性的值
* **-webkit-overflow-scrolling** 属性被设置"touch"的元素
在层叠上下文中，其子元素同样也按照上面解释的规则进行层叠，其子元素的z-index值只在父级层叠上下文中有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。
<br>
## 层叠上下文的特性
* 层叠上下文的层叠水平要比普通元素高
* 层叠上下文可以阻断元素的混合模式
* 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文
* 每个层叠上下文和兄弟元素独立，也就是当进行层叠变化或渲染的时候，只需要考虑后代元素
* 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中
<br>
## z-index
z-index可以设置成三个值：
* auto，默认值。当设置为auto的时候，当前元素的**层叠级数是0**，同时这个盒**不会**创建新的层级上下文（除非是根元素）
* 数字。指示层叠级数，可以使负值，同时无论是什么值，都会创建一个新的层叠上下文；
* inherit
除了由根元素创建的根层叠上下文以外，其它上下文是由 z-index 不为 auto 的“positioned”元素所创建。
<br>
## 层叠顺序
“层叠顺序”英文称作”stacking order”. 表示元素发生层叠时候有着特定的垂直显示顺序。
**支持 z-index 的元素： 非定位元素和非flex子元素**
如果层叠上下文元素不依赖z-index数值，则其层叠顺序是z-index:auto可看成 z:index: 0 级别；
如果层叠上下文元素依赖z-index数值，则其层叠顺序由z-index值决定。
定位元素会层叠在普通元素的上面，其根本原因就在于：
* 元素一旦成为定位元素，其z-index就会自动生效，此时其z-index就是默认的auto，也就是0级别，根据上面的层叠顺序表，就会覆盖inline或block或float元素。
* 而不支持z-index的层叠上下文元素天然 z-index:auto 级别，也就意味着，层叠上下文元素和定位元素是一个层叠顺序的，于是当他们发生层叠的时候，遵循的是“后来居上”准则。
元素发生层叠的时候，其覆盖关系遵循下面2个准则：
* 谁大谁上：当具有明显的层叠水平标示的时候，如识别的z-indx值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。
* 后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。
<br>
## opacity的影响
在[CSS3-color](http://www.w3.org/TR/css3-color/#transparency)中有这样的解释
> Since an element with opacity less than 1 is composited from a single offscreen image, content outside of it cannot be layered in z-order between pieces of content inside of it. For the same reason, implementations must create a new stacking context for any element with opacity less than 1.
由于一个 opacity 小于1的元素需要依靠这个元素以外的图像来合成，因此它外部内容不能根据 z-index 被层叠到该元素的内容中间（子元素也会变得透明，如果存在 z-index 不为 auto 的“positioned”子元素，那么这些子元素就需要与外部元素进行层叠计算，透明部分就会有奇怪的计算结果），因此它需要创建一个新的层叠上下文，以防止外部内容对该元素的透明化内容造成影响。
那么opacity对实际的层叠会有什么影响呢？规范中这样描述的：
>If an element with opacity less than 1 is not positioned, implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with ‘z-index: 0’ and ‘opacity: 1’.
>If an element with opacity less than 1 is positioned, the ‘z-index’ property applies as described in [CSS21], except that ‘auto’ is treated as ‘0’ since a new stacking context is always created. See section 9.9 and Appendix E of [CSS21] for more information on stacking contexts.
>The rules in this paragraph do not apply to SVG elements, since SVG has its own rendering model ([SVG11], Chapter 3).
>
* opacity小于1的“non-positioned”元素，它就会被当作一个z-index: 0且opacity: 1的“positioned”元素一样，来进行层叠计算（前文规则中的第6层）；
* opacity小于1的“positioned”元素，它将按照前文中z-index的层叠规则计算技术，只不过，即使z-index是auto，仍然会创建层叠上下文；
<br>
## 例子
<br>
### 父元素是否为层叠上下文
~~~
<div class="box" style="top: 50px;">
<div id="box1" style="position:relative; z-index:2;"><br>#box1 <br> z-index:2</div>
</div>
<div class="box">
<div id="box2" style="position:relative; z-index:1;"><br><br><br>#box2 <br> z-index:1</div>
</div>
.box {
position:relative;
z-index: auto;
text-align: center;
}
#box1 {width: 200px;height: 90px;border: 1px dashed #999966;background-color: #ffffcc;}
#box2 {width: 90px;height: 200px;border: 1px dashed #669966;background-color: #ccffcc;}
~~~
把 .box 中的 z-index: auto 改为 0，结果如下：
z-index: auto 所在的 div 元素是一个普通的元素，里面的两个子元素的层叠比较就不受父级的影响，两者直接套用层叠黄金准则，这里，两者有着明显不一的z-index值，因此，遵循“谁大谁上”的准则。
而z-index一旦变成数值，哪怕是0，都会创建一个层叠上下文。此时，层叠规则就发生了变化。层叠上下文的特性里面最后一条——自成体系。两个子元素的层叠顺序比较变成了优先比较其父级层叠上下文元素的层叠顺序。这里，由于两者都是z-index:0，层叠顺序这一块两者一样大，此时，遵循层叠黄金准则的另外一个准则“后来居上”，根据在DOM流中的位置决定谁在上面。
<br>
### CSS3与新时代的层叠上下文
**display:flex|inline-flex与层叠上下文**
要满足两个条件才能形成层叠上下文：
* 父级需要是display:flex或者display:inline-flex水平
* 子元素的z-index不是auto，必须是数值。
~~~
<div class="box">
<div class="container">
container
<div class="inner">Item</div>
</div>
</div>
.box { }
.container { border: 1px dashed #999966;background-color: #ffffcc; z-index: 1; }
.inner {
width: 250px;
height: 200px;
position: relative; z-index: -1; right: -150px;
border: 1px dashed #669966;background-color: #ccffcc;
}
~~~
结果如下
将 .box 加上样式 display: flex，则变为
没添加 display: flex; 时，container 是普通元素，负值 z-index 的层叠顺序在 block 水平元素的下面
添加 display: flex后，container 拥有层叠上下文，负值 z-index 的 item 层叠顺序比 作为背景的container 高
**opacity与层叠上下文**
~~~
<div class="container">
container
<div class="inner">Item</div>
</div>
.container { border: 1px dashed #999966;background-color: #ffffcc; }
.inner {
width: 250px;
height: 200px;
position: relative; z-index: -1; right: -150px;
border: 1px dashed #669966;background-color: #ccffcc;
}
~~~
.container 添加样式 opacity: 0.7; 后：
### 不使用 z-index时堆叠顺序
~~~
<br /><br />
<div id="absdiv1" class="opacity">
<br /><span class="bold">DIV #1</span>
<br />position: absolute;
</div>
<div id="reldiv1" class="opacity">
<br /><span class="bold">DIV #2</span>
<br />position: relative;
</div>
<div id="reldiv2" class="opacity">
<br /><span class="bold">DIV #3</span>
<br />position: relative;
</div>
<div id="absdiv2" class="opacity">
<br /><span class="bold">DIV #4</span>
<br />position: absolute;
</div>
<div id="normdiv">
<br /><span class="bold">DIV #5</span>
<br />no positioning
</div>
~~~
~~~
div {
font: 12px Arial;
text-align: center;
}
.bold { font-weight: bold; }
.opacity{opacity: 0.7;}
#normdiv {
height: 70px;
border: 1px dashed #999966;
background-color: #ffffcc;
margin: 0px 50px 0px 50px;
}
#reldiv1 {
height: 100px;
position: relative;
top: 30px;
border: 1px dashed #669966;
background-color: #ccffcc;
margin: 0px 50px 0px 50px;
}
#reldiv2 {
height: 100px;
position: relative;
top: 15px;
left: 20px;
border: 1px dashed #669966;
background-color: #ccffcc;
margin: 0px 50px 0px 50px;
}
#absdiv1 {
position: absolute;
width: 150px;
height: 350px;
top: 10px;
left: 10px;
border: 1px dashed #990000;
background-color: #ffdddd;
}
#absdiv2 {
position: absolute;
width: 150px;
height: 350px;
top: 10px;
right: 10px;
border: 1px dashed #990000;
background-color: #ffdddd;
}
~~~
* #5没有定位，处于正常流，所以根据以上规则，先于#1,#2,#3,#4这些已定位元素渲染，在最下方
* #1，#2，#3，#4都是已定位元素，且未设置z-index，所以根据其在文档中出现的顺序依次被渲染
<br>
### float的层叠
~~~
<div id="abs1">
<b>DIV #1</b><br />position: absolute;
</div>
<div id="flo1">
<b>DIV #2</b><br />float: left;
</div>
<div id="flo2">
<b>DIV #3</b><br />float: right;
</div>
<br />
<div id="sta1">
<b>DIV #4</b><br />no positioning
</div>
<div id="abs2">
<b>DIV #5</b><br />position: absolute;
</div>
~~~
~~~
div {
padding: 10px;
text-align: center;
}
#abs1 {
position: absolute;
width: 150px;
height: 200px;
top: 10px;
right: 140px;
border: 1px dashed #900;
background-color: #fdd;
}
#sta1 {
height: 100px;
border: 1px dashed #996;
background-color: #ffc;
margin: 0px 10px 0px 10px;
text-align: left;
}
#flo1 {
margin: 0px 10px 0px 20px;
float: left;
width: 150px;
height: 200px;
border: 1px dashed #090;
background-color: #cfc;
}
#flo2 {
margin: 0px 20px 0px 10px;
float: right;
width: 150px;
height: 200px;
border: 1px dashed #090;
background-color: #cfc;
}
#abs2 {
position: absolute;
width: 150px;
height: 100px;
top: 130px;
left: 100px;
border: 1px dashed #990;
background-color: #fdd;
}
~~~
* #4是正常流中非定位的元素，所以先被渲染，在最底层。
* #2 #3一个左浮动，一个右浮动，接着被渲染。彼此不会因为z-index值被覆盖。见下图。
* #1 #5为已定位的元素，最后被渲染，当浏览器窗口变小时，#5在#1上面，因为HTML文档中#5在#1后面。见下图。
<br>
### z-index
~~~
<div id="abs1">
<b>DIV #1</b>
<br />position: absolute;
<br />z-index: 5;
</div>
<div id="rel1">
<b>DIV #2</b>
<br />position: relative;
<br />z-index: 3;
</div>
<div id="rel2">
<b>DIV #3</b>
<br />position: relative;
<br />z-index: 2;
</div>
<div id="abs2">
<b>DIV #4</b>
<br />position: absolute;
<br />z-index: 1;
</div>
<div id="sta1">
<b>DIV #5</b>
<br />no positioning
<br />z-index: 8;
</div>
~~~
~~~
div {
padding: 10px;
opacity: 0.7;
text-align: center;
}
#abs1 {
z-index: 5;
position: absolute;
width: 150px;
height: 350px;
top: 10px;
left: 10px;
border: 1px dashed #900;
background-color: #fdd;
}
#rel1 {
z-index: 3;
height: 100px;
position: relative;
top: 30px;
border: 1px dashed #696;
background-color: #cfc;
margin: 0px 50px 0px 50px;
}
#rel2 {
z-index: 2;
height: 100px;
position: relative;
top: 15px;
left: 20px;
border: 1px dashed #696;
background-color: #cfc;
margin: 0px 50px 0px 50px;
}
#abs2 {
z-index: 1;
position: absolute;
width: 150px;
height: 350px;
top: 10px;
right: 10px;
border: 1px dashed #900;
background-color: #fdd;
}
#sta1 {
z-index: 8;
height: 70px;
border: 1px dashed #996;
background-color: #ffc;
margin: 0px 50px 0px 50px;
}
~~~
<br>
### 同一层叠上下文
~~~
<div id="div1">
<br /><span class="bold">DIV #1</span>
<br />position: relative;
<div id="div2">
<br /><span class="bold">DIV #2</span>
<br />position: absolute;
<br />z-index: 1;
</div>
</div>
<br />
<div id="div3">
<br /><span class="bold">DIV #3</span>
<br />position: relative;
<div id="div4">
<br /><span class="bold">DIV #4</span>
<br />position: absolute;
<br />z-index: 2;
</div>
</div>
~~~
~~~
.bold {
font-weight: bold;
font: 12px Arial;
}
#div1,
#div3 {
height: 80px;
position: relative;
border: 1px dashed #669966;
background-color: #ccffcc;
padding-left: 5px;
}
#div2 {
opacity: 0.8;
z-index: 1;
position: absolute;
width: 150px;
height: 200px;
top: 20px;
left: 170px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
#div4 {
opacity: 0.8;
z-index: 2;
position: absolute;
width: 200px;
height: 100px;
top: 65px;
left: 50px;
border: 1px dashed #000099;
background-color: #ddddff;
text-align: left;
padding-left: 10px;
}
~~~
div#1 与 div#3的层级顺序与 z-index: 0相同，但没有创建层叠上下文。因此直接比较 div#2 与div#4 的 z-index 大小
<br>
若给 div#3加上 z-index: 1, div#2 z-index 改为2，div#4 z-index改为100，结果如下
div#2 与 div#3 都创建了层叠上下文且层级相同（相对于根节点），因此 div#3 在 div#2 的下面。div#4在 div#3的层级上下文中，必然会在 div#3之上，但因为 div#3 的层叠顺序在 div#2 之下，不管 div#4的 z-index 为多少 都在 div#2 下。
<br>
再次对元素样式修改
让 div#1 和 div#3 的 z-index为1，它们在 SC0（根层叠上下文）中的层级都是1，那么它们将按照DOM树的顺序来绘制，这意味着 div#3 稍微比 div#1 高那么一点。在这两个层叠上下文中，分别有子元素 div#2 和 div#4。此时，尽管 div#2的层级数非常大，但由于它所处的层叠上下文 SC1 在 SC3 之下，因此 div#2 不仅在 div#4 之下，还会位于 div#3 之下。
<br>
## 总结
* 元素设置了z-index后，必须将position设置为fixed、absolute或relative才回使z-index创建新的层叠上下文或生效
* 根元素拥有一个根层叠上下文
* opacity及一些其他新的CSS3属性的设置也可能创建新的层叠上下文，这些属性的引入让层叠计算变得更加复杂
* 计算层叠顺序时，需要先考虑元素所处的层叠上下文，层叠上下文之间的层叠关系直接决定了其元素集合之间的层叠关系（从父规则）；
> 层叠上下文的层级是HTML元素层级的一个层级，因为只有某些元素才会创建层级上下文。可以这样说，没有创建自己的层级上下文的元素将被父层叠上下文包含
<br>
参考资料
[深入理解CSS中的层叠上下文和层叠顺序 « 张鑫旭-鑫空间-鑫生活](https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/)
[层叠上下文 Stacking Context - elcarim - 博客园](https://www.cnblogs.com/elcarim5efil/p/4764607.html)
[z-index堆叠规则 - starof - 博客园](https://www.cnblogs.com/starof/p/4424926.html)
[the_stacking_context](https://developer.mozilla.org/zh-CN/docs/web/guide/css/understanding_z_index/the_stacking_context)
[Stacking with floated blocks](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float)
[Adding_z-index](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/Adding_z-index)
[Stacking_context_example_1](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/Stacking_context_example_1)
- 第一部分 HTML
- meta
- meta标签
- HTML5
- 2.1 语义
- 2.2 通信
- 2.3 离线&存储
- 2.4 多媒体
- 2.5 3D，图像&效果
- 2.6 性能&集成
- 2.7 设备访问
- SEO
- Canvas
- 压缩图片
- 制作圆角矩形
- 全局属性
- 第二部分 CSS
- CSS原理
- 层叠上下文（stacking context）
- 外边距合并
- 块状格式化上下文（BFC）
- 盒模型
- important
- 样式继承
- 层叠
- 属性值处理流程
- 分辨率
- 视口
- CSS API
- grid（未完成）
- flex
- 选择器
- 3D
- Matrix
- AT规则
- line-height 和 vertical-align
- CSS技术
- 居中
- 响应式布局
- 兼容性
- 移动端适配方案
- CSS应用
- CSS Modules（未完成）
- 分层
- 面向对象CSS（未完成）
- 布局
- 三列布局
- 单列等宽，其他多列自适应均匀
- 多列等高
- 圣杯布局
- 双飞翼布局
- 瀑布流
- 1px问题
- 适配iPhoneX
- 横屏适配
- 图片模糊问题
- stylelint
- 第三部分 JavaScript
- JavaScript原理
- 内存空间
- 作用域
- 执行上下文栈
- 变量对象
- 作用域链
- this
- 类型转换
- 闭包（未完成）
- 原型、面向对象
- class和extend
- 继承
- new
- DOM
- Event Loop
- 垃圾回收机制
- 内存泄漏
- 数值存储
- 连等赋值
- 基本类型
- 堆栈溢出
- JavaScriptAPI
- document.referrer
- Promise（未完成）
- Object.create
- 遍历对象属性
- 宽度、高度
- performance
- 位运算
- tostring( ) 与 valueOf( )方法
- JavaScript技术
- 错误
- 异常处理
- 存储
- Cookie与Session
- ES6（未完成）
- Babel转码
- let和const命令
- 变量的解构赋值
- 字符串的扩展
- 正则的扩展
- 数值的扩展
- 数组的扩展
- 函数的扩展
- 对象的扩展
- Symbol
- Set 和 Map 数据结构
- proxy
- Reflect
- module
- AJAX
- ES5
- 严格模式
- JSON
- 数组方法
- 对象方法
- 函数方法
- 服务端推送（未完成）
- JavaScript应用
- 复杂判断
- 3D 全景图
- 重载
- 上传（未完成）
- 上传方式
- 文件格式
- 渲染大量数据
- 图片裁剪
- 斐波那契数列
- 编码
- 数组去重
- 浅拷贝、深拷贝
- instanceof
- 模拟 new
- 防抖
- 节流
- 数组扁平化
- sleep函数
- 模拟bind
- 柯里化
- 零碎知识点
- 第四部分 进阶
- 计算机原理
- 数据结构（未完成）
- 算法（未完成）
- 排序算法
- 冒泡排序
- 选择排序
- 插入排序
- 快速排序
- 搜索算法
- 动态规划
- 二叉树
- 浏览器
- 浏览器结构
- 浏览器工作原理
- HTML解析
- CSS解析
- 渲染树构建
- 布局（Layout）
- 渲染
- 浏览器输入 URL 后发生了什么
- 跨域
- 缓存机制
- reflow(回流)和repaint(重绘)
- 渲染层合并
- 编译（未完成）
- Babel
- 设计模式（未完成）
- 函数式编程（未完成）
- 正则表达式（未完成）
- 性能
- 性能分析
- 性能指标
- 首屏加载
- 优化
- 浏览器层面
- HTTP层面
- 代码层面
- 构建层面
- 移动端首屏优化
- 服务器层面
- bigpipe
- 构建工具
- Gulp
- webpack
- Webpack概念
- Webpack工具
- Webpack优化
- Webpack原理
- 实现loader
- 实现plugin
- tapable
- Webpack打包后代码
- rollup.js
- parcel
- 模块化
- ESM
- 安全
- XSS
- CSRF
- 点击劫持
- 中间人攻击
- 密码存储
- 测试（未完成）
- 单元测试
- E2E测试
- 框架测试
- 样式回归测试
- 异步测试
- 自动化测试
- PWA
- PWA官网
- web app manifest
- service worker
- app install banners
- 调试PWA
- PWA教程
- 框架
- MVVM原理
- Vue
- Vue 饿了么整理
- 样式
- 技巧
- Vue音乐播放器
- Vue源码
- Virtual Dom
- computed原理
- 数组绑定原理
- 双向绑定
- nextTick
- keep-alive
- 导航守卫
- 组件通信
- React
- Diff 算法
- Fiber 原理
- batchUpdate
- React 生命周期
- Redux
- 动画（未完成）
- 异常监控、收集（未完成）
- 数据采集
- Sentry
- 贝塞尔曲线
- 视频
- 服务端渲染
- 服务端渲染的利与弊
- Vue SSR
- React SSR
- 客户端
- 离线包
- 第五部分 网络
- 五层协议
- TCP
- UDP
- HTTP
- 方法
- 首部
- 状态码
- 持久连接
- TLS
- content-type
- Redirect
- CSP
- 请求流程
- HTTP/2 及 HTTP/3
- CDN
- DNS
- HTTPDNS
- 第六部分 服务端
- Linux
- Linux命令
- 权限
- XAMPP
- Node.js
- 安装
- Node模块化
- 设置环境变量
- Node的event loop
- 进程
- 全局对象
- 异步IO与事件驱动
- 文件系统
- Node错误处理
- koa
- koa-compose
- koa-router
- Nginx
- Nginx配置文件
- 代理服务
- 负载均衡
- 获取用户IP
- 解决跨域
- 适配PC与移动环境
- 简单的访问限制
- 页面内容修改
- 图片处理
- 合并请求
- PM2
- MongoDB
- MySQL
- 常用MySql命令
- 自动化（未完成）
- docker
- 创建CLI
- 持续集成
- 持续交付
- 持续部署
- Jenkins
- 部署与发布
- 远程登录服务器
- 增强服务器安全等级
- 搭建 Nodejs 生产环境
- 配置 Nginx 实现反向代理
- 管理域名解析
- 配置 PM2 一键部署
- 发布上线
- 部署HTTPS
- Node 应用
- 爬虫（未完成）
- 例子
- 反爬虫
- 中间件
- body-parser
- connect-redis
- cookie-parser
- cors
- csurf
- express-session
- helmet
- ioredis
- log4js（未完成）
- uuid
- errorhandler
- nodeclub源码
- app.js
- config.js
- 消息队列
- RPC
- 性能优化
- 第七部分 总结
- Web服务器
- 目录结构
- 依赖
- 功能
- 代码片段
- 整理
- 知识清单、博客
- 项目、组件、库
- Node代码
- 面试必考
- 91算法
- 第八部分 工作代码总结
- 样式代码
- 框架代码
- 组件代码
- 功能代码
- 通用代码