浏览器兼容性学习之：IE z-index bug

解决方法：

两个元素的平等级别祖先元素z-index高的，显示于上面。俗称：后台硬占据最高点。

祖先元素必须是同一级别的，比如比较两个 span 谁盖在上面，应该比较的不是 p 和 li 的 z-index，而应该是 li 与 li 这两个平行级别的元素：

<ul>
<li>
<p>
<span> 第一个元素 </span>
</p>
</li>
<li>
<span> 第一个元素 </span>
</li>

见例子程序：

<div id="wrapper" class="single">
    
      <div id="t">  
        <div id="yellow">
          <p>#yellow p<br />应该是在上面的</p>
        </div>
        <div id="green">#green<br />IE6/7显示在上面，实际上应该在下面</div>
      </div>
  
</div>

  <style type="text/css">
    body{padding:30px;}
    p{margin-bottom:15px;}
    
    #t{position:relative;height: 300px;}
    #yellow{position:relative;}
    #yellow p, #green{width:200px;height:200px;background-color:#9c0;;}
    #yellow p{position:absolute;background-color:#FF0;z-index:10000000000;}
    #green{position:absolute;top:90px;left:50px;z-index:10;}
  </style>