与CSS重叠的边框

Question

我有一个网页标题，我试图使边框重叠。这里是我所拥有的一个简化版本jsfiddle。 这就是我的目标为：（图像的第二行是如果页面宽度减小，会发生什么）

我尝试使用绿色（标志）的绝对定位，但是这导致菜单（黄色）与徽标重叠，而不是像现在发生的那样在页面上垂直堆叠。

我的下一个想法是给边界（红色）绝对定位，但在各种尝试中，我似乎总是以页面顶部的边框结束，就像标题div忽略高度的标识/菜单。这是成立类似：

#header { 
    position: relative; 
} 
#border { 
    position: absolute; 
    bottom: 0; 
} 

如何对此进行设置任何建议，无论是固定我有什么或完全尝试不同的做法？

编辑： 这就是为什么我试图做到这一点，使用相同的颜色更好的描述（为什么重叠，为什么黄色菜单应在标志结束）：

Answer 1

所以像这样？

绿色块与红色边框重叠。

编辑 -添加百分比宽度和@media查询，以便它调整大小。

Have a fiddle!

HTML

<div id="header"> 
    <div id="menu"> 
     Contents 
    </div> 
    <div id="logo"></div> 
</div> 

CSS

#header { 
    width: 100%; 
    max-width: 700px; 
    min-width: 320px; 
    height: 200px; 
    position: relative; 
    background: blue; 
} 
#logo { 
    background: green; 
    height: 80px; 
    width: 190px; 
    position: absolute; 
    top: 80px; 
    left: 40px; 
} 
#menu {  
    height: 40px; 
    width: 300px; 
    background: yellow; 
    display: block; 
    position: absolute; 
    top: 80px; 
    right: 0; 
} 
@media screen and (max-width: 600px) {  
    #menu { 
    top: 30px; 
    } 
} 
#header:after { 
    content:''; 
    height: 80px; 
    width: 100%; 
    display: block; 
    position: absolute; 
    bottom: 0; 
    background: #F00; 
}