z-index属性在IE6和IE7中的bug,和position属性的冲突

z-index属性和position属性凑在一起，在IE6和IE7下会出现问题，这个bug你要是不知道解决方法，真的很难解决。

解决的办法就是，子级和父级同时都设定一个z-index值，一直到父级的父级的父级，一次类推，不然这个子级总是会被父级的同级其他元素给挡住。

<div id="header">

   <div id="nav">

       <ul>

           <li>

               <a href="#">首页</a>

               <div class="menu_child"></div>

           </li>

       </ul>

   </div>

</div>

例如上面代码的层级关系中，在节点li中设置position:relative属性，在节点class为menu_child中设置position:absolute;left:0;top:0;z-index:9998;display:none;属性，这个节点是鼠标划过时的一个下拉菜单。如果CSS中仅仅是这样设置的话，在IE6和IE7下z-index:9999根本不起作用，这个下拉菜单总会被下边的内容挡住。那么怎么解决呢？解决办法是：将class为menu_child的节点的父级li也设置一个z-index值，同时ul,id为nav，id为header的“长辈们”都要设置一个z-index值。这样肯定能解决这个bug了。