关于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。
