CSS覆盖div与另一个div

Question

目标：我正在尝试将div（蓝色+绿色）移到横幅（红色）上方。

紫色div有不同的内容，所以它的高度是可变的。 考虑具有固定高度的标题（黄色）和横幅（红色），以便您可以使用固定位置。

我的尝试是在jsfiddle。

JsFiddle： http://jsfiddle.net/dEb3m/

这是最终输出。

横幅是在后台。新闻（绿色）与主要（橙色）相关

HTML：

<div id="header">header</div>
<div id="banner">banner</div>

<div id="search">search</div>

<div id="news">

    <div class="new_item">new 1</div>
    <div class="new_item">new 2</div>
    <div class="new_item">new 3</div>

</div>

<div style="clear: both;"></div>

<div id="main">main</div>
<div id="footer">footer</div>

CSS：

#header, #banner, #main, #footer {
    width: 400px;
}

#banner {
    height: 100px;
}

#search {
    width: 100px;
    float: left;
}

#news {
    display: inline-block;
    width: 300px;
}

.new_item {
    display: inline-block;
    float: left;
    min-height: 100px;
    width: 150px;
    max-width: 150px;
}

Answer 1

你什么时候在横幅（红色）上面移动div（蓝色+绿色）？

如果始终，您可以使用以下CSS代码：

#banner {
    margin-bottom: -50px;
}

以下是jsFiddle。

如果只是滚动，则可以使用以下CSS代码：

#banner {
    position: fixed;
    z-index: -1;
}
#search,
#news {
    margin-top: 100px;
}

以下是jsFiddle。

干杯， 托马斯。

Answer 2

<强>解决方案：

JSFiddle demo

CSS：

#header, #banner, #main, #footer {width: 400px;}
#header {background-color: yellow;}
#banner {background-color: red;height: 50px;position:absolute;z-index:-1;}
#search {background-color: blue;width: 100px;float: left;margin-top:20px;}
#news {background-color: green;display: inline-block;width: 300px;overflow:hidden;white-space:nowrap;margin-top:20px;}
.new_item {
    vertical-align:top;
    white-space: normal;
    background-color: pink;
    display: inline-block;
    min-height: 100px;
    width: 150px;
    max-width: 150px;
}
#main {background-color: orange;}
#footer {background-color: silver;}