0

私のウェブサイトのナビゲーションバーにはその下にボックスの影がありますが、何らかの理由でその下に別の div を追加すると (これは本質的に単なる巨大な画像です)、ナビゲーションバーのボックスの影が消え、画像がナビゲーションバーに重なっているように見えます、または少なくともそれのボックスシャドウイング。以下は、私が何を意味するかを示す2つの画像です。

下の div/画像なし - http://puu.sh/3Iw9F.png 下の div/画像あり - http://puu.sh/3Iwbx.jpg

z-indexをいじってみましたが、うまくいきませんでした。私が間違っていることはありますか？

    <div id="navbar">
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
     </div>

    <div id="images">
        <img src="image/image1.jgp" />
    </div>

    #navbar {width:100%;padding:10px 0px;text-align:center;z-index:100;box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);-moz-box-shadow:0 1px 3px rgba(34,25,25,0.4);-webkit-box-shadow:0 1px 3px rgba(34,25,25,0.4);}
    #navbar a {text-decoration:none;padding:5px 10px;border:1px solid #fff;font-size:16px;font-family: 'Source Sans Pro', sans-serif;color:#3f3f3f;font-weight:900;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}
    #navbar a:hover {background:#F26311;border:1px solid #E0570F;color:#fff;text-shadow:0px 2px 2px #E0570F;}

    #images {width:100%;}
4

2 に答える 2

0

両方を別の div に含めることができます。

<div id="wrap">
  <div id="navbar">
  </div>
  <div id="images">
  </div>
</div<

次に、ラップに影を付けます。画像の下部に表示されるはずです。wrapまたは、 divに追加するもの。

それらをdivに含める代わりに、別のオプションもあります。ナビゲーションにパディングを追加してからposition:relative; top:x;、画像 div にパディングを追加できます。

お役に立てれば。

于 2013-07-22T00:52:23.123 に答える