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;を与えます。そしてそれは修正されます。

私自身も知りたいので、なぜこれが機能するのかについて、誰かがより良い説明をしてくれることを願っています。

編集：私はabitをグーグルで検索し、この興味深い投稿を見つけました：

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

于 2013-08-23T17:48:50.997 に答える