如何解决这个IE6 z-index的bug？

我已阅读此iFrame workaround IE6。但我真的不明白如何使用这个，如果我动态显示一个DIV。如何解决这个IE6 z-index的bug？

我附上了一个样本。单击输入元素时，我想要显示具有最高z-索引的div面板。（这应该被显示在选择控制）

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Test</title> 

    <script type="text/javascript"> 
    function showItem(obj) { 
     obj.style.visibility = 'visible'; 
     obj.focus(); 
    } 
    </script> 

</head> 
<body> 
    <input onclick="showItem(myPanel)" /> 
    <div id="myPanel" style="position: absolute; top: 35px; left: 10px; width: 200px; 
    height: 200px; background-color: Gray; visibility: hidden; color: Silver;"> 
    Hello world 
    </div> 
    <div> 
    <select name="thisDD" id="thisDD"> 
     <option value="1">One</option> 
     <option value="2">Two</option> 
     <option value="3">Three</option> 
    </select> 
    </div> 
</body> 
</html>

来源

2009-10-09 Magnus Johansson

要使用的iframe解决方法，需要在同一坐标，相同的宽度，相同的高度来声明的iframe，具有低的z-index。

<iframe id="iframe" style="position: absolute; top: 35px; left: 10px; width: 200px; height: 200px; visibility: hidden; z-index: 1" frameborder="0"></iframe>

然后，你需要在DIV上宣布了更高的z-index：

<div id="myPanel" style="...; z-index: 2"></div>

然后，当你showItem，同时显示iframe和股利。 iframe将位于div后面，因为它的z-索引较低。

来源

2009-10-09 13:02:20

如何解决这个IE6 z-index的bug？

回答

相关问题