Z-index问题与IE7

Question

我越来越z-index问题。我试图把位置：相对和Z - 索引。但仍然问题依然存在。

下面是我的代码：

<tr> 
<td colspan="2"> firstname</td> 
<td colspan="2"><table cellspacing='0' cellpadding='0' border='0' style='position:relative;float:left;'> 
<tr><td width="25%"> 
<div class="yui-skin-sam"> 
<div id="myAutoComplete"> 
    <input id="myInput" type="text"> 
    <div id="myContainer"></div> 
</div> 
</div> 
</tr> 
</table> 
</td> 
</tr> 

<tr> 
<td colspan="2"> lastname</td> 
<td colspan="2"><table cellspacing='0' cellpadding='0' border='0' style='position:relative;float:left;'> 
<tr><td width="25%"> 
<input type="text" name="lastName"/> 
</tr> 
</table> 
</td> 
</tr> 
<tr> 
<td colspan="2">address</td> 
<td colspan="2"><table cellspacing='0' cellpadding='0' border='0' style='position:relative;float:left;'> 
<tr><td width="25%"> 
<input type="text" name="address"/> 
</tr> 
</table> 
</td> 
</tr> 

请给一些建议，以解决此问题。

谢谢，

拉吉

Answer 1

“在Internet Explorer中定位的元素产生新的堆叠内容，开始为0的z轴折射率值。因此z索引工作不正常”。

要修复这个错误，只需将更高的z-index应用到目标元素的父节点。例如：

<div style="z-index: 3"> 
    <div style="z-index:1;"> 
     something here .... 
    </div> 
</div> 

如果有吨div嵌套的，你可以利用JavaScript来更高的z-index递归适用于这些元素的父母。脚本添加到您的网页来解决它：

$(function() { 
    var zIndexNumber = 1000; 
    $('div').each(function() { 
     $(this).css('zIndex', zIndexNumber); 
     zIndexNumber -= 10; 
    }); 
}); 

我不知道什么是你的z-index的目标，你可以在$（“格”）更改为$（“whateveryouwant”），全部依靠您的需求。

详情：

http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/ http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/