z-index

默认的摆放规则：

假设元素没有指定的z-index属性，那么元素按照以下顺序叠放（从低到顶或者从下到上顺序）：
1.根元素的背景或边界。（最低）
2.普通流（无定位或者static定位）的块元素按照html中出现顺序进行堆叠。（其次）
3.定位元素按照HTML中的出现顺序进行堆叠。（再次）

如图：

Paste_Image.png

如果对这张图还是没理解，请点这个链接.

有浮动元素的规则

对于浮动的块元素来说，堆叠顺序变得有些不同。浮动块元素的放置于非定位块元素与定位块元素之间（从下到上的顺序）：

1.根元素的背景或者边界
2.位于普通流中的后代块元素按照HTML出现顺序堆叠。
3.浮动块元素。
4.常规流中的后代行内元素
5.后代中定位元素按照它们在HTML中出现的顺序堆叠。

如图：

Paste_Image.png

使用z-index

如果需要改变元素的默认摆放顺序，只要给元素指定z-index。z-index必须是整数，体现了元素在z轴的位置：

• 底层：距离观察者最远
• ...
• -3层
• -2层
• -1层
• 0层（默认）
• 1层
• 2层
• 3层
• ...
• 顶层：距离观察者最近

没有指定z-index的时候，所有元素默认在0层渲染。多个元素的z-index属性相同时按照上文描述的顺序布局。

使用z-index排序的例子：

Paste_Image.png

** 注意： div#5的z-index无效，因为位指定position属性。 **

堆叠上下文

指定z-index属性将构造一个堆叠上下文。

以下元素构成堆叠上下文指：

• 根元素html
• 定位元素，且z-index值不为auto。
• opacity小于1的元素
• 在移动Webkit、Chrome22+以上，指定position: fixed的元素总是会构造堆叠上下文，即使z-index为auto。

总而言之：

• z-index不为auto，opacity小于1的元素会构成堆叠上下文。
• 堆叠上下文可以嵌入其他堆叠上下文。
• 每个堆叠上下文和它的同级上下文是独立的。
• 每个堆叠上下文是自包含的。

如图：

Paste_Image.png

以上大部分摘自segmentfault的解释，最后的堆叠上下文说得这么复杂，其实就是元素同级和不同级时的情况。看上图就好理解了。