Question

我得到了z-index问题。我试图把位置：相对和z-index.But仍然存在问题。

以下是我的代码：

<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中，定位元素生成一个新的堆叠上下文，从z-index值0开始。因此，z-index无法正常工作。”

要修复错误，请简单地将更高的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目标是什么，你可以将$（'div'）更改为$（'whateveryouwant'），这些都取决于你的需求。

详细说明：

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

IE7的z-index问题

1 个答案: