與另一個div的CSS覆蓋div

目標：我試圖移動橫幅（紅色）上方的div（藍色+綠色）。與另一個div的CSS覆蓋div

紫色的div有不同數量的內容，所以它的高度是可變的。考慮標題（黃色）和橫幅（紅色）的固定高度，以便您可以使用固定位置。

我的嘗試是在jsfiddle。

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

goal

這是最終輸出。

new

橫幅是在後臺。新聞（綠色）是相對於主（橙色）

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

來源

2014-01-08 Ing. Michal Hudak

圖像看起來就像一個爛攤子給我。我通常會去，但我甚至不能告訴你想要什麼。隨機「溢出」爲什麼不只是擺脫第三項，如果你不想要它？或者你想把它推下？不清楚。也許它只是我，但這看起來像是地獄。 – Ruddy

目標：我正在嘗試移動橫幅（紅色）上方的2個div（藍色+綠色）。 –

你的意思是像背景中的橫幅？爲什麼不把橫幅作爲第一個容器？這不是你的圖像顯示 – DaniP

解決方案：

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

來源

2014-01-14 08:33:30

當你移動的div（藍+綠）以上橫幅（紅色）？

如果它總是，您可以使用下面的CSS代碼：

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

這裏是一個jsFiddle一起玩。

如果只是當你滾動，您可以使用下面的CSS代碼：

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

這裏是一個jsFiddle一起玩。

乾杯，托馬斯。

來源

2014-01-08 14:49:05 tzi

與另一個div的CSS覆蓋div

回答

相關問題