1) 指定堆叠层次:’z-index’属性
‘z-index’
取值： <integer> | inherit
初始： auto
适用于：定位元素
继承： 否
百分比： N/A

对于一个定位框，’z-index’属性指定了：

• 当前堆叠内容中框的堆叠层次。
• 该框是否生成局部堆叠内容。

取值的含义如下：

• <integer>: 该整数是生成的框在当前堆叠内容中的堆叠层次。该框生成一个新堆叠上下文，且在其中它的堆叠层次是’0’。
• auto
  生成的框在当前堆叠内容中的堆叠层次和它的父框相同。该框不生成新的局部堆叠内容。

2) 堆叠上下文
堆叠上下文能包含更深层的堆叠上下文。一个堆叠上下文从它的父级堆叠上下文的观点来看是原子的;在其它堆叠上下文的框可能不干涉它的任何框。

每个框属于一个堆叠上下文。每个定位的框在给出的堆叠上下文有一个整数的堆叠级别，堆叠级别是它在相同堆叠上下文里面z-轴相对于其它堆叠级别的位置。有较大堆叠级别的框总是会被格式化在较低堆叠级别框的前面。框可以有负的堆叠级别。

在同一堆叠上下文中，具有相同的堆叠级别的框根据文档树自然定义顺序由后到前堆放。

3) 堆叠上下文的生成
根元素形成根堆叠上下文。

为“已定位的元素”(包含相对定位元素)指定一个有效的数值z-index，将会生成新的堆叠上下文，且生成盒在当前层叠上下文中的层级为 0。

当“已定位的元素” 指定 z-index: auto，生成盒在当前层叠上下文中的层级为 0。但该盒不建立新的层叠上下文。

此处：“定位”指的是 position 为 relative 、absolute 、fixed 的元素，“非定位”则指static。

3) 堆叠上下文中层级的顺序

在每个堆叠上下文中，下面的层在从后到前的顺序中绘出:

• 背景和边框: background和元素的borders形成堆叠上下文。
• 负z-index: 子堆叠上下文有负的堆叠级别(大多是负的在前面)。
• 块级盒：属于正常排版的，非行级，非定位的后代。
• 浮动盒：非定位的浮动（即排除了 position: relative 的浮动盒）。
• 行内盒：正常排版，行级，非定位后代，包含inline tables和inline块。
• z-index=0: 堆叠级别为0的子堆叠上下文和堆叠级别为0的定位后代。
• 正z-index: 子堆叠上下文有正的堆叠级别(最小的正数优先)

在每个堆叠上下文，定位元素的堆叠级数为0(第6层)，非定位浮动(第4层)，内联块(5层)，还有inline table(5层)，被渲染好像那些元素本身生成新的堆叠上下文，除了它们定位的后代和任意将是子堆叠上下文参与当前的堆叠上下文。

该渲染顺序递归地应用到每个堆叠上下文。

4) CSS3 带来的变化
以下情况会产生新的层叠上下文：

• 根元素（HTML）
• 绝对或相对定位且 z-index 值不为 auto
• 一个弹性元素(即父元素 display: flex|inline-flex)，且 z-index 值不为 auto
• 元素的 opacity 属性值小于 1
• 元素的 transform 属性值不为 none
• 元素的 mix-blend-mode 属性值不为 normal
• 元素的 filter 属性值不为 normal
• 元素的 isolation 属性值为 isolate
• position: fixed
• will-change中指定了上述任意属性，即便你没有直接定义这些属性
• 元素的 -webkit-overflow-scrolling 属性值为 touch

以上元素建立新层叠上下文的同时，也会提升元素自身所在层叠上下文中的层级。