将元素垂直放置在两个其他元素之间（和之上）

Question

在我页面顶部的header元素下面，我有一个#container1元素，其中包含文字内容。我想在两者之间和顶部显示第三个#sub_header，如mockup screenshot所示。

我可以通过应用#sub_header和一个负的上边距来使position:relative在标题之上。但我不知道如何让#container1元素的上半部分“来到”#sub_header以下。

有什么建议吗？

Answer 1

你正在寻找这样的东西吗？

header{
    width: 100%;
    height: 200px;
    background-color: rgb(200,200,200);
}
#sub_header{
    width: 300px;
    height: 100px;
    background-color: yellow;
    position: absolute;
    left: 0;
    right: 0;
    margin: -50px auto 0;
}
#container1{
    width: 100%;
    height: 200px;
    background-color:rgb(220,220,220);
}

<header></header>
<div id="sub_header"></div>
<div id="container1"></div>