z-index 属性之IE/FF下同性不同貌

首先来回顾一段基础：

“z-index : auto | number

auto：默认值。
number：无单位的整数值，可为负数。使用范围： 适用于定位元素（position 属性值为 relative 或 absolute 或 fixed的对象）。

z-index 值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而z-index 值为负数的对象在其之下。注意：这个属性不会作用于窗口控件，如select 对象。在IE 5.5＋中，iframe 对象开始支持此属性。而在之前的浏览器版本中，iframe 对象是窗口控件，会忽略此属性。”

OK，下面我们开始

———————————————————————–

先来看一个实例，是Codemoz！一期网站首页一个模块用到的一个效果：

点击这里查看实例

这里，我想使用纯CSS实现当鼠标滑过时，相应的图片会在原位置放大显示，而周围的其他图片排列位置不变，且位于鼠标滑过时放大的图片之下。

出于排版考虑，限定了缩略图输出尺寸，故只考虑放大效果实现。

技术上其实不难，定义li元素为相对定位，里面的img元素为绝对定位，定义img元素在hover状态下的尺寸、绝对定位位置，z-index设置一个正值以使其可以显示在周围其他图片之上

可以看到FF下显示一切按照预期。但在IE下（如下图），虽然hover状态下的img定义了z-index:100;，却未能实现“周围的其他图片排列位置不变，且位于鼠标滑过时放大的图片之下”，而是继续保持着z-index为auto值时文档中li元素后来者居上（back-to-front ）的顺序来层叠。

第一感觉是诧异，意识到这应该和IE/FF对定位的元素的解析不一致有关。说真的以前真没特别主意这个的问题。摆弄了一会代码，对IE和FF下对这块的解析有了一个比较形象的认识，说明详见下面图示：

清楚了这点，IE下所出现的问题的解决办法就很简单了：为hover状态下的li也设置一个z-index正值，来打破IE下按照元素出现先后顺序进行层叠的默认解析。

修改后的演示请点击这里