IE中div被堵住（绝对定位被挡住） _Web前端

IE中div被挡住（绝对定位被挡住）

今天在写菜单时遇到一个CSS问题，就是菜单的弹出层被其他的层挡住，不能显示完整。

本想通过直接修改弹出层的高度即（z-index）来解决该问题，试了几次之后发现无论被挡住的层设置为多高即使为（99999）还是会被挡住。之后查看相关的文档之后终于解决了这个问题，原来遇到这个问题时，不是修改容器本身的高度，而是需要修改父容器的高度。

下面列出具体的代码：

<div class=”BlockA” style=”position:relative;”>
        <div  style=”position:absolute;z-index:99999;“>我是最高层</div>
    </div>
  <div class=”BlockB” style=”position:relative;”>
<pre name="code" class="html">   <div  style=”position:absolute;“>最低层</div>

</div>

即使如上的写法，BlockA依然会被BlockB挡住。

问题描述：我们想要达到的目的是BlockA在BlockB的上方，思路通过调整z-index的数值调整无效，但是只能IE8和firefox下显示正常，ie6、7下面均无效

解决办法：

  <div class=”BlockA” style=”position:relative;z-index:1;”>
        <div  style=”position:absolute;“>我是最高层</div>
    </div>
  <div class=”BlockB” style=”position:relative;”>
<pre name="code" class="html">   <div  style=”position:absolute;“>最低层</div>

</div>

通过设置父容器的高度即可解决该问题。可以看到在这只需要设置BlockA的高度，就可顺利解决这个问题。

3楼lidaasky5天前 14:15: 不错，学习了

2楼hxl1943186天前 22:50: 哈哈，不错，继续努力！

1楼jdluojing6天前 19:16: css最容易出现浏览器兼容问题，也是前端开发最麻烦的地方