IE下定位层被select遮盖问题解决
日期：2010-03-09 分类：前端制作
需求如图，两行的select后面各有个按钮可以触发position定位的div浮层，浮层上边缘紧贴所在行下边缘。
去掉项目外观，还原为基本的产品原型则是
如果不做任何处理的话，IE 7/8以及firefox和chrome等浏览器下没问题，但是IE 6下会是这样：
google了下。IE 6下，select的优先级比div等元素高，所以position定位在select上的浮层不管z-index设置多少都遮盖不了select元素。常规办法是浮层中嵌入一个隐藏的iframe，利用框架的高优先级来遮盖select。
单个select覆盖div浮层解决如图：
单个select覆盖div层级解决DEMO
然后，回归到需求，两行之间距离非常近，直接如此处理可以看到，无论在任何浏览器下，select 2都会遮盖掉panel 1，如图：
文档流中，后出现的元素默认层级比之前的高，这里需要给每行单独设定z-index，让第一行的层级高于第二行，即可解决，如图：
多个select覆盖div层级解决DEMO
Reader's Comments
Leave a Comment
我已经不再支持IE6了 管他怎样
个人博客无所谓，最早我都想单独写一套HTML 5的模板，连IE 7都屏蔽掉。但是对于商业公司来说，商业利益始终高于技术推动……不是每个公司都是youtube的呀。
我公司的网站，下一个版本就不管了IE6了。出提示让他们升级。