我的外層div背景的孩子DIV

Question

這裏使用負利潤率的時候伸出我的樣式表的代碼

#topwrapper { 
    background: url(images/orangebg.jpg) repeat-x top; 
    height: 502px; 
} 

#mainwrapper { 
    background:url(images/bluebg.jpg) repeat; 
} 

#maincontent { 
    margin: 0 auto; 
    width: 961px; 
    background-color:#F0EFEF; 
    position: relative; 
    margin-top: -312px; 
} 

我想要的搜索Maincontent格向上移動到橙色的div，但它帶來的是bluebg.jpg它（縮短orangebg.jpg）。當我嘗試使用-top：312px;而不是負邊距，它會在#maincontent下面添加空格。

頁面上的代碼讀取的jsfiddle jsfiddle.net/bdh2a

<div id="topwrapper"></div> 
<div id="mainwrapper"><div id="maincontent">test test</div></div> 

視圖 - 刪除的margin-top：-312px;這就是我需要的橙色背景來看看它上面的灰色框

Answer 1

我找到了解決!!

#topwrapper { 
    background: url(images/orangebg.jpg) repeat-x top; 
    height: 502px; 
} 

#mainwrapper { 
    background:url(images/bluebg.jpg) repeat; 
    float: left; 
    width: 100%; 
    display: block; 
    position: relative; 
} 

#maincontent { 
    width: 961px; 
    background-color:#F0EFEF; 
    position: relative; 
    margin-top: -312px; 
    margin-left: -480px; 
    position: relative; 
    float: left; 
    left: 50%; 
} 

頁面上的代碼保持不變

Answer 2

也許你可以設置margin-top: -312px;到mainwrapper div？

Answer 3

重新安排你的HTML這樣的：

<div id="mainwrapper"> 
<div id="maincontent"><p>text text</p></div> 
<div id="topwrapper"></div> 
</div> 

然後使用CSS設置（調整高度，當然東西）：

#mainwrapper{ 
height:100%; 
background-color:#FF4200; 
width:100%; 
} 

#topwrapper { 
background-color:#1B00FF; 
height:100px; 
min-width:100%; 
margin:0 auto; 
position:absolute; 
top:0; 
z-index:0; 
} 

#maincontent { 
margin: 0 auto; 
padding:20px; 
top:20px; 
background-color:#ccc; 
position: relative; 
color:#000; 
z-index:1; 
width:80% 
} 

退房這樣的jsfiddle：HTTP：// jsfiddle.net/imakeitpretty/yqnfk/ 有很多希臘文的，因爲你無法看到橙色沒有它擴大。 「文本文本」是不夠的做到這一點。