默认的摆放规则：
假设元素没有指定的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的解释，最后的堆叠上下文说得这么复杂，其实就是元素同级和不同级时的情况。看上图就好理解了。
