标签：
一、z-index基础知识
1.z-index的含义
z-index属性指定了元素及其子元素的【z顺序】，而【z顺序】可以决定当元素发生覆盖的时候，哪个元素在上面。通常一个较大的z-index值的元素会覆盖较低的那一个。
2.属性值
z-index:auto; 默认值
z-index:<integer>;整数值
z-index:inherit; 继承
3.基本特性
1>支持负值；
2>支持CSS3 animation动画；（并没什么实用应用场景）
3>在CSS2.1时代，需要和定位元素配合使用
如果不考虑CSS3，只有定位元素（position:relative/absolute/fixed/sticky）的z-index才有作用！在CSS3中有例外
二、z-index与定位元素
z-index只对定位元素有作用。要设置非static的定位属性，z-index才会生效。
如果定位元素z-index没有发生嵌套(并列的)：
1>后来者居上的准则；
2>哪个大哪个上
如果定位元素z-index发生嵌套：
1>祖先优先原则
前提：z-index是数值，不是auto
祖先后来者居上
CSS2.1：（z-index：auto）当前层叠上下文生成盒子层叠水平是0。盒子（除非是根元素）不会创建一个新的层叠上下文。
三、层叠上下文和层叠水平
1.层叠上下文（stacking context）
层叠上下文是HTML元素中的一个三维概念，表示元素在z轴上有了“可以高人一等”。
栗子： 皇帝（你） 当官（层叠上下文） 家族（嵌套）
· 层叠上下文表示普通老百姓HTML元素当官了，离皇帝更近了。
· 页面根元素天生具有层叠上下文，称之为“根层叠上下文” -（皇亲国戚）
· z-index值为数值的定位元素也具有层叠上下文。 -（科考入选）
· 其他属性...... -其他当官途径
2.层叠水平（stacking level）
层叠上下文中的每个元素都有一个层叠水平，决定了同一个层叠上下文中元素在z轴上的显示顺序。
遵循“后来居上”和“谁大谁上”的层叠准则
层叠水平和z-index不是一个东西。普通元素也有层叠水平。z-index只在定位元素上起作用。
3.层叠上下文的几个特性：
1>层叠上下文可以嵌套，组合成一个分层次的层叠上下文。
2>每个层叠上下文和兄弟元素独立：当进行层叠变化或渲染的时候，只需要考虑后代元素。
3>每个层叠上下文是自称体系的：当元素的内容被层叠后，整个元素被认为是在父层的层叠顺序中。
四、元素的层叠顺序 stacking order
层叠顺序：元素发生层叠时候有着特定的垂直显示顺序
意义：规范元素重叠时候的呈现规则。
著名的7阶层叠水平（stacking level）
这样的层叠顺序更符合页面加载的功能和视觉呈现的。内容是页面最重要是实体，因此层叠水平要高。
文字是内联水平display:inline.
上图中的层叠顺序：1>inline-block大于block
2> 文字和inline-block方块的层叠水平一样。如果元素的层叠水平一样，没有别的因素干扰，则遵循后来者居上原则。
五、z-index与层叠上下文
1.行为要点：
1>定位元素默认z-index:auto可以看成是z-index:0；
2>z-index不为auto的定位元素会创建层叠上下文；
3>z-index层叠顺序的比较止步于父级层叠上下文；
标签：
原文地址：http://www.cnblogs.com/benbendu/p/5811534.html
