Question

我正在编写一些具有以下结构的HTML代码

<div style="position:relative">
<form>
<table>
<tr>
<td> <div id="Upper_Element" style="position:absolute;z-index:10"></div> </td>
</tr>
<tr>
<td> <div id="Lower_Element" style="position:absolute;z-index:-1"></div> </td>
</tr>
</table>
</form>
</div>

此处Upper_Element是一个YUI自动填充文本框（当用户输入像google这样的内容时会显示建议）而Lower_Element是正常的下拉框（<select>）。在IE6中，当显示自动填充建议时，Lower_Element将显示在建议列表上。在IE8等其他浏览器中它的工作正常。我尝试了位置和z-index属性，但没有运气。

请让我知道还有什么可以尝试。

提前致谢！

Answer 1

“Lower_Element是正常下拉框”是什么意思？它是示例中的<select>元素还是<div>？如果是<select>，那么您会看到影响IE6的very old bug并且之前已被多次询问/解决，例如Z-Index problems with IE6 and html <select> element和iframe shimming or ie6 (and below) select z-index bug

Answer 2

使用position: absolute和z-index属性将一个元素放在另一个元素上方

相关链接：

代码

<div style="position:absolute"> ... </div>

位：

<div style="position:absolute; top: 100px; left: 100px"> ... </div>

<强> UPD

<div style="position:relative">
  <form>
    <div id="upper_element" style="position:absolute; z-index:2">I am top level div!</div>
    <div id="lower_element" style="position:absolute; z-index:1">I am on the bottom of life</div>
  </form>
</div>

http://jsfiddle.net/vLx6X/

如何在IE6中显示另一个DIV上的一个DIV？

2 个答案: