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