如何在下面添加另一個div時使框陰影保持不變？

我的網站上的導航欄在它下面有一個盒子陰影，但由於某種原因，當我在其下面添加另一個div時（它基本上只是一個巨大的圖像），導航欄上的盒子陰影消失，它幾乎就像圖像重疊導航欄或至少是它的陰影框。以下是2張圖片，展示了我的意思。如何在下面添加另一個div時使框陰影保持不變？

沒有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%;}

來源

2013-07-22 Richie Brown

請張貼您的代碼。 – j08691

編輯並添加。 –

試着把'position：relative'放到你的'div＃navbar'。盒子陰影消失的原因是你的'div＃images'重疊它 –

你可以嘗試遏制他們兩個在另一個DIV。

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

然後把陰影放在包裝它應該顯示在圖像的底部。或者任何你想添加到wrap div的東西。

另一個選項，而不是將它們包含在一個div中。您可以在導航上添加填充，然後在圖像div上添加填充。

希望這會有所幫助。

來源

2013-07-22 00:52:23 Tonzkie

你的問題是，當你添加一個影子不包括在div中的陰影。你需要做的是在你的菜單欄的底部填充填充，這樣你的影子就有了空間。

來源

2013-07-22 00:53:24

如何在下面添加另一個div時使框陰影保持不變？

回答

相關問題