- 普通文档流中遵循：“后来者居上”。
- 当两个元素都为块元素时，默认越后面的元素层级越高，但是背景的层级比文字小。后来的块元素 也盖不住前面的文字。
- 当两个元素都为行内块和行内元素时，也是后来的元素比前面的元素层级高，但是与块元素不同的是行内块元素的背景层级比文字高。
- 行内元素和行内块元素的层级比块级元素高。
- 浮动系列：
- 浮动和浮动比，后一个比前一个层级高
- 浮动和块元素比，浮动层级高
- 浮动和行内块比，行内块层级高
- 浮动和行内比，行内层级高
- 定位的元素：
- 都为定位元素时，也遵循后一个元素比前一个元素高。
- 绝对定位和块元素比，绝对定位层级高
- 绝对定位和行内块元素比，绝对定位层级高
- 绝对定位和行内元素比，绝对定位层级高
- 绝对定位和浮动，绝对定位层级高。
总结：
层叠上下文（border/background）< 负z-index < block块状盒子 < 浮动的盒子 < inline/inline-block水平盒子 < z-index:auto 或者 z-index:0 < 正z-index（定位并设定了正的z-index值，z-index值越大 层级越高）
参考 www.cnblogs.com/chenshanyua…
1. <!DOCTYPE html>
1. <html>
1. <head>
1. <meta charset="utf-8" />
1. <title>div重叠 叠加实例 未排层叠顺序 www.divcss5.com</title>
1. <style>
1. .div-relative{[position](http://www.divcss5.com/rumen/r403.shtml):relative; color:#000; border:1px solid #000; [width](http://www.divcss5.com/rumen/r119.shtml):500px; [height](http://www.divcss5.com/rumen/r123.shtml):400px}
1. .div-a{ position:absolute; left:30px; top:30px; background:#F00; width:200px; height:100px}
1. /* css注释说明： [背景](http://www.divcss5.com/rumen/r125.shtml)为红色 */
1. .div-b{ position:absolute; left:50px; top:60px; background:#FF0; width:400px; height:200px}
1. /* 背景为黄色 */
1. .div-c{ position:absolute; left:80px; top:80px; background:#00F; width:300px; height:300px}
1. /* [DIV背景颜色](http://www.divcss5.com/rumen/r540.shtml)为蓝色 */
1. </style>
1. </head>
1. <body>
1. <div class="div-relative">
1. <div class="div-a">我背景为红色</div>
1. <div class="div-b">我背景为黄色</div>
1. <div class="div-c">我背景为蓝色</div>
1. </div>
1. </body>
1. </html>
