关于定位和z-index的一些小经历

今天在工作过程中，遇到这么一个奇葩问题，搞了好一阵子才找到原因，遂总结了一下...

先上DEMO：

<div style="800px; height:400px;">
  <div style="380px; height:400px; float:left;">
    <div id="a1" style=" position:relative; z-index:1;">
      <div style="position:absolute;">
        <div style="400px; height:200px; position:absolute; background:#F00; left:100px; top:50px;"></div>
      </div>
    </div>
  </div>
  <div style="380px; height:400px; float:right;">
    <div id="a2" style=" position:relative; z-index:1;">
      <div style="position:absolute;">
        <div style="400px; height:200px; position:absolute; background:#0F0; left:-100px; top:100px;"></div>
      </div>
    </div>
  </div>
</div>
<input type="button" value="click" onclick="document.getElementById('a1').style.zIndex=3" /> 

当你用IE7执行此段代码

( IE6暂未确认是否会出此问题，不过推断也会有这问题，毕竟这两浏览器就是一对奇葩... )

你会发现，不管怎么点按钮，红色层死活不肯跑到绿色层上面...

而在其他浏览器不会，唯独IE的奇葩兄弟会这样

但是...如果你用CSS直接定义一个z-index:3给a1，红框又能盖住绿框了...

并且用页面加载事件( 如jquery的$(document).ready(function(){...}) )来触发JS，修改a1的z-index也是可以实现红框盖住绿框...

也就是说，唯独像点击，鼠标经过这样的时间所触发执行的JS是无效果的...

此时此刻...无比郁闷了吧...

解决方法是：

将a1和a2的父级元素都设为相对定位( position:relative )

然后修改按钮onclick事件触发的JS，让其功能变为如下...

修改a1父级元素的z-index，使a1的父级元素的z-index值大于a2的父级元素的z-index值

这样就正常了

 

总结：

IE6 和 IE7 下，两个相对定位元素，如果他们的上一级父级元素( 注意，是最亲的一级 )不是同一元素。

其z-index值通过页面加载事件以外的其他事件来执行JS进行修改，均无效果。

而直接定义CSS，或通过ready事件来执行JS进行修改，则有效果。