重新安排你的html：

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;设置为mainwrapper div？

Answer 2

重新安排你的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/ 那里有很多希腊文字，因为没有它就看不到橙色的扩展。 “文字文字”还不够。

Answer 3

我找到了解决方案!!

#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%;
}

页面上的代码保持不变

在子div中使用负边距时，我的外部div背景会延伸

3 个答案:

重新安排你的html：