z-index

在 CSS 2.1 中，所有的盒模型元素都处于三维坐标系中。除了我们常用的横坐标和纵坐标，盒模型元素还可以沿着“z 轴”层叠摆放，当他们相互覆盖时，z 轴顺序就变得十分重要。

使用 z-index 很简单：给它指定一个整数值即可。然而，在层叠比较复杂的 HTML 元素上使用 z-index 时，结果可能让人觉得困惑，甚至不可思议。这是由复杂的元素排布规则导致的。

不含 z-index 的堆叠：+定位元素

优先级，从低往高：

  1. 根元素的背景与边框
  2. 普通流 (无定位) 里的块元素 (没有 position 或者 position:static;) 按 HTML 中的出现顺序堆叠
  3. 定位元素按 HTML 中的出现顺序堆叠

Demo-1

不含 z-index 的堆叠：+浮动

优先级，从低往高：

  1. 根元素的背景和边界
  2. 普通流 (无定位) 里的块元素 (没有 position 或者 position:static;) 按 HTML 中的出现顺序堆叠
  3. 浮动块元素
  4. 常规流中的后代行内元素
  5. 定位元素按 HTML 中的出现顺序堆叠

Demo-2

堆叠上下文（stacking context）

可以参考如下入门文章

Understanding CSS z-index