关于IE下z-index失效的问题

请看下面一段代码:

 

 <html>

    <head>

        <script type="text/javascript">

            function displayTip(){

                document.getElementById("tipMessage").style.display = "block";

            }



            function unDisplayTip(){

                document.getElementById("tipMessage").style.display = "none";

            }

        </script>

    </head>



    <body>

        <div style="position:relative;">

            <a onmouseover="displayTip();" onmouseout="unDisplayTip();" href="#"> just here! 

            </a>

            <div id="tipMessage" style="position:absolute;z-index:9;display:none;width:250px;left:100px;">

                这条信息在IE6下会被右边的图片遮住,在firefox下可以正常显示。

            </div>

        </div>



        <div style="position:relative;">

            <div style="position:absolute;z-index:1;left:200px;top:-20px;">

                <img src="8.jpg"/>

            </div>

        </div>

    </body>

</html>





在IE6下的显示结果为:







在FF下的显示结果为:







很明显,在IE6下,z-index属性不起作用了,尽管tipMessage这个div的z-index属性值大于img的z-index属性值。

那么为什么z-index为9的div在IE下反而显示在z-index为1的img下面呢?


就是因为IE不自动识别relative的深度的问题
,也就是说默认值就是他们的出现顺序。

所以把上面的一段代码改为如下所示就可以了:




<div style="position:relative;z-index:2;">

    <a onmouseover="displayTip();" onmouseout="unDisplayTip();" href="#"> just here! </a>

    <div id="tipMessage" style="position:absolute;z-index:9;display:none;width:250px;left:100px;">

        这条信息在IE6下会被右边的图片遮住,在firefox下显示正常。

    </div>

 </div>





IE6下显示结果为:





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值