0

我刚刚完成一个小网站，并在 IE7 中注意到徽标隐藏在主页上的图像后面：http ://reapvalue.com/

这是html：

<div id="wrap">
  <div id="header">
    <ul id="main-nav">
  <li><a  href="/about/">About</a></li>
  <li><a   href="/what-we-do/">What We Do</a></li>
  <li class="last"><a   href="/contact/">Contact</a></li>
</ul>

<h1><a href="/"><img id="logo" src="/photos/logo.png" alt="REAP - Renewable Energy and Preservation, April Montgomery, LLC." ></a></h1>
<h1><a href="/"><img id="logo-small" src="/photos/logo-small.png" alt="REAP - Renewable Energy and Preservation, April Montgomery, LLC." ></a></h1>
  </div><!-- end #header -->
  <div id="tagline">
        <span class="green">renewable energy</span> <span class="magenta">and preservation</span>
  </div>

  <div id="main" class="clearfix">

         <div id="Stage" class="EDGE-909290339"></div>

            <img  id="lead-image" src="photos/hickory.jpg" alt="hickory, nc preserveration district">

这是CSS：

#header         { width: 960px; height: 53px; margin: 0 auto; position: relative; }
body#inside #header { height: 56px; }
img#logo        { position: absolute; top: 0; left: 0; z-index: 5000; }

尽管将 z-index 设置为 5000，但它仍然隐藏在图像后面。将不胜感激将徽标放在前面的任何帮助。

谢谢。

4

1 回答 1

1

我无法真正解释为什么，但 IE7 和 IE8 中的 z-index 行为很奇怪。如果您正在使用 z-index，并希望它在较旧的 IE 浏览器中工作，则需要确保您的父元素具有比您的元素更高的 z-index。

例如，给你#header一个z-index: 6000; 它会被修复的。

我希望有人可以更好地解释为什么会这样，因为我自己也想知道。

编辑：我用谷歌搜索了一下，发现了这个有趣的帖子：

http://www.brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

于 2013-08-23T17:48:50.997 回答