我现在在一个页面上工作，该页面上有一列用性感的阴影和角落样式的盒子，这里不使用示例。我不得不承认，我不完全了解CSS的工作原理，但是看起来不错。

最顶部的框内是用于搜索的文本类型输入。该搜索框连接到一个YUI自动完成窗口小部件。

Mac上的Firefox3，Windows上的FF2和Mac上的Safari都可以正常工作。在WinXP上的IE7中，自动完成建议显示在圆角框的下面，使除第一个框外的所有内容都不可读(尽管我们仍然可以看到在框之间进行的足够窥视，使我感到满意，IE7确实收到了多个建议)。

我从哪里可以开始寻找解决问题的方法？

这是WinXP上的FF2成功的样子：

这是IE7中的失败情况：

解决方案

我并不完全理解导致该问题的设置，但是我们可能想探索YUI自动完成对象的useIFrame属性-它在自动完成字段下方分层了一个iframe对象，这使该字段然后可以浮动在在IE的越野车布局中掩盖了它。

http://developer.yahoo.com/yui/docs/YAHOO.widget.AutoComplete.html#property_useIFrame

但是文档说这在5.5 <IE <7中很重要，因此这可能不是我们遇到的问题。同样，在不完全了解正在使用的设置的情况下，我们可能还想尝试为自动完成字段和周围的块级元素尝试各种z-index值。

确保自动完成div的z索引大于构成圆角框的div的数字。我相信Microsoft将顶级元素的z-index设置为20000或者100000。这样做可能是明智的。

杰里米

抱歉，这么晚了，但是希望答案会在以后的项目中对我们有用。

这里的问题是，只要有position：relative元素，IE就会创建新的堆叠顺序，这意味着z-index本身不是唯一的控制因素。我们可以在这里阅读更多有关此的内容：

http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

为了解决该问题，如果我正确地理解了问题，请对包装整个自动完成实现的容器应用position：relative(然后对结果容器使用position：absolute)。这应该在IE中为这些元素创建一个独立的堆叠顺序，从而使它们可以在其他位置上浮动：相对堆叠会在页面的后面显示。

问候，
埃里克

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

我最终实现的工作解决方案是基于一遍又一遍地阅读此说明。

在基础HTML中，所有蓝色圆角元素都是DIV，并且它们都是兄弟姐妹(同一个DIV的所有子代)。

自动填充div本身(它是圆角容器div的曾孙)的z-index可以任意高，并且不能解决此问题，因为IE本质上是呈现搜索的全部内容框在"重要统计信息"框所有内容的下方，因为两者均具有默认的z-index，并且重要统计信息后来出现在HTML中。

技巧是给这些同级DIV(蓝色的圆角容器)中的每一个降Z索引，并标记所有它们的位置：相对。因此，包含搜索框的蓝色div是z-index：60，"重要统计信息"框是z-index：50，"标记"是z-index：40，依此类推。

因此，更一般地，找到要重叠的元素和重叠的元素的共同祖先。在共同祖先的直系子代上，以我们希望内容显示的顺序应用z-indexs。