css - 在子 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 向上移动到橙色 div，但它带来了 bluebg.jpg（缩短了 orangebg.jpg）。当我尝试使用 -top: 312px; 而不是负边距，它在#maincontent 下方添加了空间。

页面上的代码读取

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

在 jsfiddle 上查看 jsfiddle.net/bdh2a - 删除 margin-top: -312px; 这就是我需要橙色背景与顶部灰色框的方式

Answer 1

也许你可以设置margin-top: -312px;为mainwrapperdiv？

Answer 2

我找到了解决办法！！

#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 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/ 里面有很多希腊文字，因为没有它你就看不到橙色的展开。“文本文本”是不够的。