重疊陰影div在另一個

我有3個DIV，第一個是導航，第二個是SHADOW的導航，第三個是內容，我希望SHADOW div覆蓋/重疊在cotive DIV上，可能會用z-索引？或位置：固定？我嘗試了很多東西，現在失去了，請檢查並請幫助..重疊陰影div在另一個

<div style="height:50px;background:green">this is navigation</div> 
<div id="shadow" style="height:30px; background: red url(IMAGE_PATH)"></div> 
<div id="content" style="background:blue; height:150px"> this main main content</div>

PS：想這麼多事情之後，我刪除了所有的風格，這是基本的結構

來源

2014-03-07 user1718343

我不確定我是否理解你的意思，但是如果你想將陰影向上移動並保存在文檔流中，只需添加margin-top：-5px;到陰影DIV

<div style="height:50px;background:green">this is navigation</div> 
<div id="shadow" style="margin-top:-5px; height:30px; background: red url(IMAGE_PATH)"></div> 
<div id="content" style="background:blue; height:150px"> this main main content</div>

編輯：如果說的不對我提供你希望鏈接到的jsfiddle，可以幫助你。

http://jsfiddle.net/3nqay/1/

來源

2014-03-07 01:13:10 Dave

這是一個CSS的問題比什麼都重要，我建議對CSS的位置和Z-指數讀了。

http://jsfiddle.net/3nqay/2/

CSS：

#nav { 
height:50px; 
background:green; 
position:relative;} 

#shadow, #content { 
width: 100%; 
position: absolute; 
top: 0; 
left: 0;} 

#shadow { 
height:30px; 
backround:red; 
z-index:10;} 

#content { 
background:blue; 
height:150px;}

HTML：

<div id="nav"> this is navigation </div> 
<div style="position:relative"> 
<div id="content"> this main main content</div> 
<div id="shadow">this is shadow</div> 
</div>

來源

2014-03-07 01:54:48 rsynnest

添加以下CSS。

body { 
    margin: 0; 
    padding: 0; 
} 
#shadow { 
    position:absolute; 
    width: 100%; /* or your specific width in px */ 
}

，或者嘗試

#shadow { 
    position: relative; 
} 
#content { 
    margin-top: -30px; /* Equal to #shadow height */ 
    padding-top: 30px; /* Equal to #shadow height */ 
}

注：如果您添加或position:relative向position:absolute＃內容，在這種情況下，你必須使用z-index。

來源

2014-03-07 05:39:48 Iqbal

重疊陰影div在另一個

回答

相關問題