z-index在ie下缺省为：z-index:0; 而FF下则缺省为：z-index:auto;

    （这个结论已然在蓝色的《补遗 》这个帖子中得出。而本文的讨论也是对《补遗》的总结及延伸。 ）

    你可以借助ie developer tool和firebug等工具进行测试查看z-index值。需要注意的是：z-index值须在设置position:relative/absolute/fixed之后方才生效。

    正是IE/FF下这一点区别导致ie,ff下z值的不同表现。

    注意：此处所说的z值区别于z-index,它指的是z轴层叠等级(stack level)，表示垂直于显示屏方向上的各层的层叠顺序。不止z-index一个属性会影响到z轴层叠等级的大小（本文对其他属性的影响暂不做讨论，但本文的研究已排除其他属性的影响，其他属性不会影响本文的研究）。

    正常情况下：兄弟（同级）元素后者居上，父子之间子高于父。

    这一点必须明确，相信也没什么异见。

    可以看下面这个demo:

    可以看出z的等级：子级2（“堂弟”）>父级2（“叔叔”）>子级1（“子”）>父级1（“父”）。

    如果我们想要父盖过子，兄罩着弟只需设置其z-index便可。z-index值越大，给予的z值就越大。

    那么这个设置能否改变叔侄之间，堂兄弟之间的Z呢？

    先试试看：

    看上去一样有效，是吧？子级1盖过了父级2和子级2。

    但是，再看看下面这个例子，假如各级元素都是定位元素(设置了position),情况就有些不同了（之后的讨论，都是基于这个条件之下的。我觉得position定位的应用非常广泛，基于此的研究也非常有必要）。

    son1设置z-index:1000后，在FF下的z值级别就高于其叔与其堂弟father2,son2。但是在ie下这个设置却还是不行。

    这时候，我们回过头看最前面的结论：z-index在ie下缺省为：z-index:0; 而FF下则缺省为：z-index:auto;

    那么再写一个Test，将父级的z-index固定为0:

    可以看出，一旦父级元素设置了相同的z-index，ff下“侄”元素一样无法超过“叔”元素和“堂弟”元素。

    我们可以试着得出这么一个结论：

    对于定位元素，（不论IE还是FF）非同级关系和非父子关系元素之间的Z值大小比较，须要回溯至其为兄弟关系的两个祖先元素上，先比较这两个元素的z-index值，只有当“兄”的z-index大于“弟”的z-index值，“兄”的各个后代元素，才能超过“弟元素”及其子孙元素。

    我们用一个三级关系来验证一下。

    不论#first .father和#first .son如何设置，只有#first的z-index值大于0（second的z-index值为0）时，才能盖住#second。

    对于IE,元素的z-index缺省值是0，如果不另外设置“兄”，“弟”元素的z-index值，那么”兄”的z-index就无法大于“弟”的z-index。那么”兄”元素及其子孙就无法盖过”弟”元素及其子孙。而一旦“兄”的z-index大过了”弟”元素的z-index,那么情况就翻转了，“弟”元素及其子孙将无法盖过“兄”元素及其子孙。

    而对FF,元素的z-index缺省值是auto,auto的意思是什么，就是说“随便，不关我事”，那么子孙们的z值等级就只跟他们自己本身的z-index有关了。

    那么，IE上能否设置z-index:auto;呢？

    测试：

    可以看出，在IE下，去除#first{z-index:1}后，#first及其子孙无法盖住#second。

    而FF下，#first .father,#first .son却盖住了整个#second。

    推论：

    z-index:auto在ie下无效。

    那么在IE下，对于由定位元素构成的两个并列的嵌套结构块间的Z值大小，只存在两种情况：要么这个结构块里的所有层元素都在另一个结构块之上，要么就是那个结构块所有元素在其之上。没有可能一个元素能插在另一个结构块的父与子之间，这种情况在FF下是存在的（当然，还有其他浏览器），在FF下，父级是z-index:auto的元素，他们都是自由的，依据自己的z-index决定Z值。FF下甚至可以形成：

    ――――-

    ~~~~~~~~

    ――――-

    ~~~~~~~~

    这么一个四层交错，但要超过四层，就无能为力了。

    最后，还是要提醒一下，这里的讨论限于定位元素间。

    ―――补充――――-

    z-index:auto在ie中无效？

    关于z-index:auto的解释，在W3C的CSS说明文档中的解释是：

    The stack level of the generated box in the current stacking context is the same as its parent’s box. The box does not establish a new local stacking context.

    即Z的层叠等级将继承父级，不创建新的层叠内容。

    这段说明在CSS2和CSS2.1中是完全一致的，那为什么ie”不支持” z-index:auto呢？

    在css2中有一段css2.1中所没有的解释：

    An element that establishes a local stacking context generates a box that has two stack levels: one for the stacking context it creates (always ‘0′) and one for the stacking context to which it belongs (given by the ‘z-index’ property).

    一个元素创建的层叠内容框包含两个层叠等级，一个是就是创建的层叠内容（总是“0”），另一个就是这个层叠内容包含的子层叠内容（由“z-index”属性决定）。

    所以在ie当中，即便某元素设置z-index：auto，它所继承的z也是0。

    这貌似同我们文章中第一段结论一致。也勉强解释了为什么z-index:auto在IE中无效。

建议继续学习：

1. 12款很棒的浏览器兼容性测试工具推荐    (阅读：4844)
2. Javascript和CSS浏览器兼容总结    (阅读：3907)
3. 关于z-index的那些事儿    (阅读：3534)
4. 如何更改字段至兼容的不同类型    (阅读：3071)
5. 兼容所有浏览器的设为首页与显示小策略    (阅读：2948)
6. 前端设计中的浏览器CSS Hack汇总    (阅读：2772)
7. CSS中的z-index属性    (阅读：2380)
8. 抛弃 CSS Hacks 后的浏览器兼容方案    (阅读：1958)
9. 抛弃 CSS Hacks 后的浏览器兼容方案    (阅读：1680)
10. 让数据解析能够做到向前向后完全兼容(最近做项目总结)    (阅读：1586)