ie下的css层叠z-index各种问题详细整理

到新地方有些日子了，差不多适应了这边的工作节奏与流程。接到的第一个开发任务是几个比较简单的页面，需要做的工作就是先把设计图变成页面，然后使用PHP创建几个请求的接口传递数据，标准且简洁的web开发思路。可是真有些日子没有写DIV+CSS了，而且对IE6兼容性的坑碰到的还是不够多(以前做国外项目)，所以这次开发中不可避免的碰见了几个问题，尤其是在IE下的 z-index 问题很有意思，所以整理了一些资料和总结分享给大家...注：因为引入了jsfiddle，所以页面加载受影响会稍慢一些^_^

阅读目录：

z-index属性
z-index规范参考
在IE下出现的问题
在IE6下z-index的问题
>拼爹的时代
>万恶的float 
IE6下 select z-index无效而遮挡div
>用 iframe 包裹 select 元素
>以 Iframe 作为div的子元素，覆盖 select 元素
本文结语 

z-index属性

z-index : auto | numberz-index 属性设置元素的堆叠顺序，如果为正数，则离用户更近，为负数则表示离用户更远；拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面；z-index 仅能在定位元素上奏效（position 属性值为 relative 或 absolute 或 fixed的对象）。

z-index规范参考

在IE下出现的问题

当定位元素的 'z-index' 未设置时（默认为 auto），在 IE6 IE7 IE8(Q) 下将会创建一个新的局部层叠上下文。而在其它浏览器下，则严格按照规范，不产生新的局部层叠上下文。

这个问题将导致定位元素的层叠关系在不同浏览器出现很大的区别，严重的可导致页面布局混乱、内容覆盖等。

受影响的浏览器有IE6 IE7 IE8(Quriks Mode)

直接从w3help复制了代码，分析以下代码：

发表评论 共有条评论 用户名: 密码: 验证码: 匿名发表