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演示

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