z-index 属性之IEFF下同性不同貌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 ...
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软件打开。作品中的文字与图均可以修改和编辑,
图片更改请在作品中右键图片并更换,文字修改请直接点击文字进行修改,也可以新增和删除文档中的内容。
[版权声明] 本站所有资料为用户分享产生,若发现您的权利被侵害,请联系客服邮件isharekefu@iask.cn,我们尽快处理。
本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用。
网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。