7

z-index とポジショニングに問題があります。基本的に、メニュー アイテム (ホーム、アバウトなど) にカーソルを合わせると、メニューの下にペイント スプラッシュが読み込まれます。

http://www.saradouglas.net/home

スタイルシートはここにあります。

これは、各スプラッシュ div が絶対配置に設定されている場合は問題なく機能しましたが、これらが異なる画面解像度では異なる場所に表示されることに気付きました。これを相対位置に変更して、それに応じて座標を調整するだけの場合だと思いました。残念ながら、スプラッシュがメニューの下に表示されません。

明確にするために、スプラッシュをメニューの下に表示したいので、メニューは常にスプラッシュの上に表示する必要があります。これは、メニューを相対に設定し、これらのスプラッシュを絶対に設定してから問題になりました。

これが簡単に修正できることを願っていますが、何かが足りないだけです。ここの誰かが私が間違っている場所を教えてくれ、解決策を提供してくれることを願っています!

これまでにいくつかの良い回答が提出されましたが、残念ながら私の問題は解決されていません。メニューの背景を div ではなく ul クラスに追加しようとしましたが、問題に違いはありませんでした。

4

3 に答える 3

15

私が正しく思い出すと、z インデックスの優先順位は次のようになります。

  • キャンバス (要素が描画される場所 / 親の描画可能領域)
  • bgの画像
  • z-index: -1
  • デフォルト (0)
  • Z インデックス: 1+

子要素z-indexに -1 を指定すると、親の優先順位により、親の背景の下には移動しません。

これがあなたの解決策です（firebugで試しただけで動作します）：

  1. から bg 画像を削除し、 の前に#menu別の を追加します。divul.menuli
  2. 以下の css を this に渡しますdiv。
  3. これらすべてのブラシ ストロークにz-index-1 より小さい値を指定します。-2作品。

そして、それはそれであるべきです。

CSS:

position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index:-1;
background: url(...);

それほどセマンティックではないことは知っていますが、うまくいきますよね？:P

于 2012-04-26T19:34:04.260 に答える
1

メニュー div で相対位置を設定してから、メニューの div に絶対配置 div を追加する必要があります。その後、さまざまな画面解像度が問題になりません。

于 2012-04-25T20:19:07.953 に答える
0

ul の代わりに bg、paddings、height を設定するだけで実行できます。<div id="menu">

于 2012-04-25T20:24:12.840 に答える