Css YUI自动完成在IE7中的其他页面元素下呈现

我现在在一个页面上工作，其中有一列框，用性感的阴影和角落以及其他类似的例子来设计。我必须承认，我不完全理解CSS是如何工作的，但它看起来很棒

在最上面的框中是用于搜索的文本类型输入。该搜索框连接到一个小部件

在Mac上的Firefox3、Windows上的FF2和Mac上的Safari中，一切都运行良好。在WinXP上的IE7中，自动完成建议呈现在圆角框下面，使得除第一个外的所有建议都无法阅读（尽管你仍然可以看到足够多的框之间的窥视，我认为IE7确实得到了不止一个建议）

我可以从哪里着手解决问题

以下是WinXP上FF2的成功情况：

以下是IE7中的失败：

我不完全理解导致问题的设置，但您可能想探索YUI Autocomplete对象的useIFrame属性——它将一个iframe对象层叠在Autocomplete字段下，这允许字段漂浮在IE buggy布局中遮挡它的对象之上

但是医生说这在5.5我不完全了解导致问题的设置，但您可能想探索YUI Autocomplete对象的useIFrame属性——它将一个iframe对象层叠在Autocomplete字段下面，这允许该字段漂浮在IE buggy布局中遮挡它的对象之上

---

但是医生说这在5.5确保自动完成div的z索引大于构成圆角框的div。微软把排名靠前的元素的z指数定为20000或100000，我相信。这样做可能是明智的。

确保自动完成div的z索引大于构成圆角框的div。微软把排名靠前的元素的z指数定为20000或100000，我相信。这样做可能是明智的。

杰里米

很抱歉这么晚了，但希望这个答案对你将来的项目有用

这里的问题是，只要有一个元素的位置是相对的，IE就会创建一个新的堆叠顺序，这意味着z索引本身并不是唯一的控制因素。您可以在此处阅读更多关于此的信息：

为了解决这个问题，如果我正确理解了您的问题，请将position:relative应用于包装整个自动完成实现的容器（然后将position:absolute应用于结果容器）。这应该在IE中为这些元素创建一个独立的堆叠顺序，允许它们浮动到另一个位置：页面后面出现的相对堆叠

问候,， 埃里克

杰里米

很抱歉这么晚了，但希望这个答案对你将来的项目有用

这里的问题是，只要有一个元素的位置是相对的，IE就会创建一个新的堆叠顺序，这意味着z索引本身并不是唯一的控制因素。您可以在此处阅读更多关于此的信息：

为了解决这个问题，如果我正确理解了您的问题，请将position:relative应用于包装整个自动完成实现的容器（然后将position:absolute应用于结果容器）。这应该在IE中为这些元素创建一个独立的堆叠顺序，允许它们浮动到另一个位置：页面后面出现的相对堆叠

问候,，

---

Eric

我有一个类似的问题，我基本上只是通过改变不同div的z-index来解决它。只需按照每个div的显示顺序设置更高的数字。

我也遇到了类似的问题，我基本上只需更改不同div的z-index就可以解决这个问题。只是按照每个div的显示顺序设置更高的数字。

我最终实现的工作解决方案是基于反复阅读

在底层HTML中，所有蓝色圆角元素都是DIV，它们都是兄弟（同一DIV的所有子元素）

autocomplete div本身的z索引（它是圆角容器div的曾孙）可以任意高，并且它不会解决这个问题，因为IE基本上是将搜索框的全部内容呈现在“Vital Stats”框的全部内容之下，因为两者都有默认的z索引，生命统计数据后来出现在HTML中

诀窍是给每个兄弟div（蓝色圆角容器）降序z索引，并标记它们的位置：relative。因此，包含搜索框的蓝色div是z-index:60，“vitalstats”框是z-index:50，“Tags”是z-index:40，依此类推

---

因此，更一般地说，找到重叠元素和重叠元素的共同祖先。在公共祖先的直系子代上，按照您希望内容显示的顺序应用z索引。

我最终实现的工作解决方案是基于反复阅读

在底层HTML中，所有蓝色圆角元素都是DIV，它们都是兄弟（同一DIV的所有子元素）

自动完成div本身的z索引（它是r