Css 高于其他div的div

我正试图以这种方式订购div，但我找不到解决方案（主要是黄色框有问题）：

HTML:

正如你所看到的，我一直在尝试对位置和z指数做一些事情，但做得不好；）

---

顺便问一下，我怎样才能消除标题底部和内容之间的空白？所有的填充和边距都设置为0，所以我不知道为什么它们不直接相邻。

只需将标题底部置于位置：相对位置，徽标置于位置：绝对位置。然后使用顶部和左侧将其放置在您想要的位置。例如：

标题{
高度：120px；
}
.收割台顶部{
高度：40px；
背景颜色：棕色；
}
.收割台底部{
位置：相对位置；
高度：80px；
背景色：红色；
}
.标志{
位置：绝对位置；
顶部：-13px；
左：80px；
宽度：110px；
高度：110px；
背景颜色：黄色；
}
部分{
高度：800px；
背景颜色：蓝色；
}
页脚{
}

为什么要清除？你没有浮动元素。我试着做一个提琴井，我一直在尝试不同的解决方案，在我添加了清除后，标题底部显示正确。最好使用a进行清除，然后你就没有额外的标记了。另外，您还没有显示您的徽标在上面的html中的位置您可以笑，但它对我不起作用：/Take look:这是因为您混合了我们的两种代码；）在标记中使用类，并在CSS中以#作为目标（#表示ID）。通过更改标记中的所有#。（点）。或者您可以通过“id”更改HTML中的所有“class”。但是通常只在CSS中使用类并保留JavaScript/jQueryI的ID。我一直在编辑错误的样式。CSS^^'非常感谢！还有“课堂”技巧。我一直认为最好对唯一的元素使用ID。

    <div class="container">
        <header>
          <div id="header-top"></div>
          <div id="header-bottom" class="clearfix">
        </header>

       <div style="clear:both"></div>

       <div id="content">

    </div>

    header {padding: 0;margin:0; position: relative; z-index: 1;}

  #header-top {
        height: 22px;
        background-color: #a68572;
        margin:0;
        padding: 0;
    }

    #header-top p {text-align: right;}

    #header-bottom {
        width: 100%;
        background-color: red;
        padding: 0;
        margin: 0;
    }

    #logo {
        position:relative;
        height: 150px;
        width: 150px;
        background-color: yellow;
        z-index: 30;
        top:-80px;
        left: 50px;
    }

    #content {position: relative;z-index: 1;}