html5/css3在DIVs佈局問題上的DIV

Question

我有div區域，它被分成4個相等部分，就像一個靠近的區域。

現在我需要另一個div放置在底部區域作爲覆蓋到上面的div。想象它就像電視底部的文本滾動區域，電視屏幕由4個div構成。

我能夠創建5個div。現在的問題是第5個div（滾動區域）不會超出2個下部分區（3和4）的底部邊緣。我也曾經把Z指數也失敗了

任何人都可以共享一個樣本來設計它。

Answer 1

可以解決這樣說：

HTML：

<div class="area"></div> 
<div class="area"></div> 
<div class="area"></div> 
<div class="area"></div> 

<div class="overlay"></div>​ 

CSS：

.area{ 
    float: left; 
    width: 49%;  
    height: 300px; 
    border: 1px solid black; 
} 

.overlay{ 
    width: 200px; 
    height: 100px; 
    background-color: blue; 
    clear: both; 
    position: absolute; 
    bottom: 30px; 
    margin: -100px; 
    left: 50%; 
} 
​ 

請注意，我已經使用硬編碼的示例值。實際值取決於標記所處的上下文。

Answer 2

如果沒有您的代碼，很難判斷哪些功能無法正常工作。 如果我知道你想什麼，這是我會做：

<div class="container"> 
    <div class="block1"></div> 
    <div class="block2"></div> 
    <div class="block3"></div> 
    <div class="block4"></div> 
    <div class="overlay"></div> 
</div> 

CSS：

.container { 
    position: relative; 
    width: 600px; /* use the size you want */ 
    height: 400px; 
} 

.container div { 
    position: absolute; 
    width: 50%; 
    height: 50%; 
} 

.container .block1 { top: 0; left: 0; background: pink; } 
.container .block2 { top: 50%; left: 0; background: red; } 
.container .block3 { top: 0; left: 50%; background: green; } 
.container .block4 { top: 50%; left: 50%; background: blue; } 

.container .overlay { 
    position: absolute; 
    width: 80%; 
    height: 100px; 
    left: 10%; 
    bottom: 30px; /* distance from the bottom */ 
    z-index: 1; 
    background: yellow; 
}