堆叠上下文

堆叠上下文 (stack context)它是一块区域，这块区域由某个元素创建，它规定了该区域中的内容在z轴上排列的先后顺序。

创建堆叠上下文的元素

• html元素 (根元素)
• 设置了z-index (非auto) 数值的定位元素

同一个堆叠上下文中元素在Z轴上的排列

从后到前的排列顺序:

• 创建堆叠上下文的元素的背景和边框
• 堆鲁级别(z-indexstack level)为负值的堆叠上下文
• 常规流非定位的块盒
• 非定位的浮动盒子
• 常规流非定位行盒
• 任何 z-index 是 auto 的定位子元素，以及 z-index 是0的堆叠上下文
• 堆叠级别为正值的堆叠上下文

每个堆叠上下文，独立于其他堆叠上下文，它们之间不能相互穿插。

z-index

z-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。当元素之间重叠的时候，z-index 较大的元素会覆盖较小的元素在上层进行显示。

对于一个已经定位的盒子（即其 position 属性值不是 static，这里要注意的是 CSS 把元素看作盒子），z-index 属性指定：

• 盒子在当前堆叠上下文中的堆叠层级。
• 盒子是否创建一个本地堆叠上下文。