首先来回顾一段基础:
“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下按照元素出现先后顺序进行层叠的默认解析。
修改后的演示请点击这里