有一天在做选项卡片的时候,用到了负margin,然后对选项卡进行美化的时候发现了一个以前没注意到的问题。就是关于层级覆盖的问题。
然后在网上寻找了一番相关资料,找到了一个比较详细的讲解。链接:
在此,自己做一下总结。
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。
附带一个例子网址: