サイトのトップ ヘッダー バーのスタイルに取り組んでいます。ヘッダー 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を配置すると、無視されるようです。
ヘッダーロゴをsiteHeader div内で解決する別の方法はありますか?