2010-08-02 42 views
2

试图解决这个问题,并且迄今为止失败了。IE7将绝对定位的div放在底下,忽略z-index

当您开始在主题或位置字段中输入时出现的黄色自动完成div出现低于 IE7中的其他文本。这是网站:

http://www.universitytutor.com

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

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

回答

9

IE的堆栈顺序算法搞砸了。您必须将您想要的元素的父元素放置在顶部,如果元素中没有元素,并且Z_索引为正值,则将它放置为像relative这样的位置。

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

+0

你是对的。设置z-索引和位置:相对;对父母做了诡计。你真是太棒了。标记这个被接受是最简洁的。 – 2010-08-03 06:39:16

1

你必须增加相对DIV抱着它太的z-index的。

+0

是的,这是它! – 2010-08-03 06:40:43

6

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

为了使这项工作,你需要设置#homepage_search的z-index和对第一div.wrapper项目后,它的z-index和z-索引#homepage_search的需要更高。我建议在#homepage_search之后的第一个.wrapper元素中添加一个独特的类,以便您可以为其编写CSS规则。在这种情况下,如果你折叠DOM树(类似于萤火虫),它最终会看起来像你在下面看到的,所有div直接在“body”下面。

+<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。如果仍然没有运气,您可以尝试在#homepage_search中的每个项目添加2的z-index。

+0

是的!!!!! z-index和position:parent(#homepage_search)上的相对位置。你太棒了。非常感谢! – 2010-08-03 06:38:28

+0

这是事后的方式,但这个答案也帮助了我。谢谢! – RQDQ 2010-10-21 15:04:05

-1

增加元素的父元素,你要在上面的数字,比你的DIV是元素的z-index的更高的z-index被埋在下面。

还要确保PARENT具有相对绝对位置或位置。