z-index 属性之IEFF下同性不同貌
z-index 属性之IE/FF下同性不同貌 2008年06月3日 首先来回顾一段基础:
“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下按照元素出现先后顺序进行层叠的默认
解析。
本文档为【z-index 属性之IEFF下同性不同貌】，请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑，
图片更改请在作品中右键图片并更换，文字修改请直接点击文字进行修改，也可以新增和删除文档中的内容。
该文档来自用户分享，如有侵权行为请发邮件ishare@vip.sina.com联系网站客服，我们会及时删除。
[版权声明] 本站所有资料为用户分享产生，若发现您的权利被侵害，请联系客服邮件isharekefu@iask.cn，我们尽快处理。
本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用。
网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
浙公网安备 33021202002483