读此文:CSS z-index属性的使用方法和层级数的概念 总结如下
1.z-index 要想起作用,必须节点设置position:relative - fixed - absolute,三者中一者才起作用。
2.顺序规则
3.定位规则:设定position属性的值的节点会显示在不设定定位节点的 前面
根据顺序规则,定位规则,我们可以设计出比较复杂的结构,导航的层级菜单等
4.默认值规则 0 , 1, -1
5.从父规则
A 父亲 A-1 孩子节点
B 父亲 B-1 孩子节点
A的父亲的层级比B的层级高,那么即使B-1的层级设置无论有多高,都不能覆盖A-1层
6.层级数规则
如果所有节点都设置了层级规则,那么就会发生从父规则
ie 6,7下z-index的默认值规则 和W3C标准的有所差别
ie6,7下默认值是0.参与层级树的比较;标准浏览器下,不设置z-index,默认值是auto,不参与层技数的比较
浏览器的显示层级有诸多方面,切忌不要只改一个属性来解决问题!否则会给自己埋雷的。
自己只是粗略的总结一下,不懂的地方直接看原文吧!原文写的 非常好!