2

サイトのトップ ヘッダー バーのスタイルに取り組んでいます。ヘッダー DIV 内に 2 つの DIV を配置しています。1 つの Div が上にあり、もう 1 つの Div が下にあります。上部は左側のロゴ専用で、右側にリンクがあり、下部の Div は水平メニュー専用です (後で仕上げます)。

私の問題は、ロゴの位置で発生します。私のロゴは上部の Div よりもわずかに高くなっているため、下部の Div が単にロゴの下部を覆ってしまいます。ロゴをトリミングまたはサイズ変更すると、問題は解決しました。しかし、私はそれをしたくありません。より高い z-index でロゴを作成したいと思います。しかし、それは機能していません。z-index は無視されているようです。

これが私がこれまでに持っているものです:

<div id="siteHeader">

   <div id="headernav-top" style="height:50px;">
    <div id="headerlogo" style="height:72px;background-image:url('logo.jpg');background-repeat:no-repeat;">
    </div>
    <span id="headertext">  
        Welcome Back, <b>Whomever you are</b> | 
        <a href="/">My Account</a> | 
        <a href="/logout.php">Log Off</a> <br />
    </span>
  </div>

  <div id="headernav-bottom" style="height:39px;background-color:#0C6;">

    More Nav will go here

  </div>
</div> <!-- end siteHeader -->

headernav-bottomは、headerlogo div の高さ 72 ピクセルのロゴの下部を完全に覆っています。

そして、両方の div 内にz-indexを配置すると、無視されるようです。

ヘッダーロゴをs​​iteHeader div内で解決する別の方法はありますか?

4

3 に答える 3

1

あなたはすでに答えaaaaを見つけたようです.これがその理由です.z-indexは静的に配置された要素で無視されます(デフォルト). positon:relativez-index は、 、positon:absolute、またはpositon:fixed要素に適用された場合にのみ有効です。

非静的な位置属性を追加することは、要素の必要なスタックを強制する一般的な方法です。どちらを使用するかも重要です。

position: relative
これにより、要素はドキュメント内でそのフローを保持できます。これを使用すると、要素が静的要素として占める領域に他の要素が崩壊するのを防ぐことができます。

position: absolute
これにより、要素がフローから除外されます。の反対でrelative、ドキュメント内で 0px x 0px の有効サイズになります。他の要素は、この要素が他の場合に占めていた領域に折りたたまれます。(これにより、これらの要素が要素の背後に隠れることがあることに注意してくださいabsolute。)

positon: fixed
と同じabsolute。フロー外ですが、これでは、要素はウィンドウに対して相対的であり、最初の非静的な親ではありません。top( 、rightbottom、および で配置している場合にのみ重要ですleft) また、スクロールするとウィンドウに「くっつく」ように見えます。

あなたの目的のためにposition:relativeは、ポジショニング属性を持たないことがおそらく最善です。

于 2012-11-07T20:07:18.600 に答える
0

これは機能しますか?私は位置を追加しました:絶対; 属性。

<div id="headerlogo" position: absolute; style="height:72px; background-image:url('logo.jpg'); background-repeat:no-repeat;">
</div>
于 2012-11-07T19:43:05.313 に答える
0

あなたの#headernav-top高さは 50 ピクセルですが、内側の#headerlogo高さは 72 ピクセルです。したがって、内側の要素は外側の要素の境界を越えて流れます。絶対に配置していない場合は#headernav-top、それのheightプロパティを省略してください。要素は、必要に応じて高さが拡張されます (たとえば、背景画像コンテナーの高さを考慮します)。

于 2012-11-07T19:46:02.937 に答える