在ie7下的z-index问题,b标签遮住了a标签,寻求解决方案,在其他浏览器下正常,

xiaopengji
  • 631

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{margin:0;padding:0;}
        .box{height:500px;background-color:#f00 ;position:relative;}
        .box1{height:500px;background-color:green;margin-top:-50px;}
        .a,.b{background-color:#fff;display:block;border:1px solid #000;}
        .a{position:absolute;left:0;bottom:0;width:100%;height:50px;color:#fff;z-index: 1;background-color:#0000EE;}
        .b{position:relative;z-index:0;height: 100px;background-color:#fff;}
    </style>
</head>
<body>
    <div class="box">
        <a class="a" href="#">aaaa</a>
    </div>
    <div class="box1">
        <a class="b" href="#">bbb
            <br />
        <br />bbb
            <br />
        <br />bbb    <br />
        </a>
    </div>
</body>

</html>

回复
阅读 2.3k
3 个回答
陌路凡歌
  • 7.8k

父标签box和box1的z-index问题,前者z-index比后者大就不会遮挡了,ie7层级的高低不仅要看自己,还要看自己的老爸这个后台是否够硬(笑)。

box和box1都加上zindex

IE7下,层级的表现有时候不是看子标签的z-index多高,而要看整个DOM tree(节点树)的第一个relative属性的父标签的层级。也就是先拼爹:box和box1的z-index问题
另外,抵制垃圾浏览器从你我做起!

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏