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