弹出层设置z-index后在浏览器中的兼容性

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

使用注意：
（1）z-index只对position属性为relative或absolute的对象有效;
（2）z-index在IE和firefox下的默认值不同，IE下z-index默认值为0；firefox下其默认值为auto;

例子：如下图1所示，鼠标移动到价格详情四个字时会出现浮动层。

图1

js代码省略了。如果不设置任何z-index。则在ff中显示如下图2

图2

可以看出弹出层已经被下面的内容遮住了。那么把弹出层设置z-index:10吧。设置以后在ie6/ie7中还是那样的效果，在别的浏览器中显示正常。猜测原因：ie6/ie7中必须父元素的z-index也大于下面部分才能实现这种效果，于是把价格详情所在父元素的z-index设为大于0的数字就好了。但是尝试了不设置浮动层的z-index，直接设置“价格详情”所在的外层的z-index在各个浏览器中也显示正常了。

大体结构代码：

<div class="solidAll_blue clearfix pr" style="z-index:10;">
      <p class="bggray_e5eaee lh30 h30"><span class="f14b darkblue pl20">单程 <span>2月26日</span><span>(北京-上海)</span></span><a href="http://blog.163.com/chen_hui/blog/" class="ml30 unl blue">返回重选</a></p>
      <div class="p5 pl20">
        <table>中间内容省略</table>       
        <!--查看详情浮动层开始-->
        <table>中间内容省略</table>
        <!--查看详情浮动层结束-->

</div>
    </div>
    <div class="solidAll_blue clearfix borderTop_none pr">
      <p class="bggray_e5eaee lh30 h30"><span class="f14b darkblue pl20">单程 <span>2月26日</span><span>(北京-上海)</span></span></p>
      <div class="p5 pl20">
        <table>中间部分省略</table>
      </div>
    </div>

转自：http://blog.sina.com.cn/s/blog_60b35e830101615k.html