IE7下z-index深度失效的问题

<p>页面中有两个不同的层，都给了z-index，一个给得很高，一个为1，可在IE7（坚决抛弃IE6用户！）下，第一个z-index值高反而被后面z-index值低的覆盖住了。这个Bug，其实是IE7渲染DOM的问题，当一个父容器被定位(如position:relative)的时候,子元素的z-index属性会被重置。</p>
<p>父级元素加上position:relative;并设置z-index.父级元素的z-index优先，其中包含的元素的z-index是相对于父级元素的index.</p>

<div style=”position:relative;z-index=2″>
<p style=”position:absolute;z-index=99″> info</p>
<div>
<div style=”position:relative;z-index=1″>ifno2<div>

<p>上面的例子中，倘若将第一个div的z-index设置为-1，则无论p的z-index为多少，都会被下面的div遮住。相反，倘若下层div的z-index也设置成2，ie7正在解释时，会按照”position:relative”的层的顺序，自动叠加，即实际值是3.没有加position属性时，所有值继承自父级。</p>
<p>解决办法：在父容器中加上z-index值就可以了。z-index属性必须与position配合用，否则不会生效的。</p>