IE7将绝对定位的div放在下面,忽略了z-index

时间:2010-08-02 06:31:54

标签: css internet-explorer-7

试图自己解决这个问题并且到目前为止失败了。

当您开始在主题或位置字段中键入时显示的黄色自动完成div显示在IE7中的以下中的其他文本。这是网站:

http://www.universitytutor.com

设置更高的Z-index并没有解决它。适用于所有其他浏览器(IE8,FF,Chrome,Safari)但不适用于IE7。有什么想法吗?

Example http://dl.dropbox.com/u/324237/autocomplete.png

5 个答案:

答案 0 :(得分:9)

IE的堆叠顺序算法搞砸了。你必须将你想要的元素的父元素置于顶部,如果它没有一个,则给它一个像relative的位置,以及一个正的z-index。

通常会解决它。如果没有,继续尝试它的父母,直到你得到它。

答案 1 :(得分:6)

这是旧的IE z索引问题。您将需要回到DOM树中的第一级,其中交互元素的祖先是兄弟,并且在该级别,必须将z索引设置为将搜索/自动完成区域的父级设置为高于父级内容。

为了使这个工作,你需要在#homepage_search上设置一个z-index,在它之后的第一个div.wrapper项目上设置一个z-index,并且#homepage_search的z-index需要更高。我建议在#homepage_search之后的第一个.wrapper元素中添加一个唯一的类,以便为它编写CSS规则。在这种情况下,如果你崩溃了你的DOM树(像firebug这样的东西),它最终看起来就像你在下面看到的那样,直接在“body”下面的所有div。

+<body>
 +<div id="uservoice-feedback">
 +<div id="login">
 +<div id="header">
 +<div id="homepage">
 +<div id="homepage_search">  (give z-index: 2)
 +<div class="wrapper">       (give z-index: 1)
 +<div class="wrapper">
 +...

我希望这有道理吗?您还需要将#homepage_search设置为具有相对或绝对定位,因此它甚至会尝试使用z-index。如果仍然没有运气,您可以尝试将该z-index为2添加到#homepage_search内的每个项目。

答案 2 :(得分:2)

答案 3 :(得分:1)

你必须增加持有它的相对div的z-index。

答案 4 :(得分:-1)

将你想要的元素的PARENT的z-index增加到一个高于你的div被掩埋的元素的z-index的数字。

同时确保PARENT的位置绝对位置或位置相对。