关于z-index 属性和层级覆盖的相关学习

　　有一天在做选项卡片的时候，用到了负margin，然后对选项卡进行美化的时候发现了一个以前没注意到的问题。就是关于层级覆盖的问题。

　　然后在网上寻找了一番相关资料，找到了一个比较详细的讲解。链接：http://www.neoease.com/css-z-index-property-and-layering-tree/

　　在此，自己做一下总结。

　　1、在普通文档流里，后面的节点会覆盖前面的节点。当节点position:static;的时候也一样。

　　2、存在浮动元素时，浮动元素会覆盖普通文档流的节点。（这点是我简单测试的结果，不知道准确性高不高啊。。。）

　　3、节点的position:relative|absolute|fixed;会覆盖普通文档流节点。（注：测试了一下，此类节点也覆盖浮动元素。）

　　4、设置了position:relative|absolute|fixed;且设置z-index:number;的节点，按照number大的覆盖number小的。

　　5、position:relative|absolute|fixed;为设置z-index时，IE6/7的z-index默认为0，其他浏览器z-index默认为auto。

　　6、z-index为auto时，不参与层级比较。

　　7、从上遍历到 z-index 不为 auto 的元素来参与比较。

　　8、position不为relative|absolute|fixed时，z-index不生效。

　　层技树：position:relative|absolute|fixed;且设置z-index:number;的节点, 会被放置到一个与 DOM 不一样的层级树里面, 并且在层级树中通过对比 z-index 决定显示的层级。

同一层级的number大的覆盖小的，不管同一层级下的子节点number再大，也只比较最上层同级节点的number。

　　附带一个例子网址：http://www.neoease.com/tutorials/z-index/

转载于:https://www.cnblogs.com/connie1120/archive/2013/01/24/2875025.html