IE6/7 z-index失效问题

如图所示,左边是chrome,右边是ie6,这里开发的是一个简单的下拉列表导航组件,在ie6下,下拉的列表无论如何设置z-index,都不会置于黑背景的上方。经过了网上大量的查询,发现该bug属于ie6下常见bug之一,原来工作中其实也遇到过,只不过没有重视。

在这里说一下出现这个bug的原因,ie6与ie7的z-index无论设置的多高,都得以他最外层的position:relative的元素的z-index值为准,在这个示例中,黑色面板的位置是relative的,而下拉列表框所在的导航的外层也是relative的,他们都没有设z-index,那么ie6就会认为后来出现的relative的层次高,所以无论怎么设置导航本身的z-index都不会将其置于黑框前面来。那么说到这里了就描述一下这个bug的解决真言,在ie6/7下,z-index永远是相对于老子的,儿子再厉害,后台不硬,还是没办法。

所以这里的解决方法就是,找到导航最外层的relative层,然后给其写一个z-index值,比黑框高就可以了。