div 高于其他 div

Question

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

HTML：

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

CSS：

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

正如你所看到的，我一直在尝试对位置和 z 索引做一些事情，但做得不好;)

而且，顺便说一句，我怎样才能摆脱标题底部和内容之间的空白？所有的内边距和边距都设置为 0，所以我不知道为什么它们不直接相邻。

Answer 1

只需将 .header-bottom 置于 position:relative 并将 .logo 置于 position: absolute 中。然后使用 top 和 left 将其放置在您想要的位置。例子 ：

header {
  height: 120px;
}

.header-top {
  height: 40px;
  background-color: brown;
}

.header-bottom {
  position: relative;
  height: 80px;
  background-color: red;
}
.logo {
  position: absolute;
  top: -13px;
  left: 80px;
  width: 110px;
  height: 110px;
  background-color: yellow;
}
section {
  height: 800px;
  background-color: blue;
}

footer {
  
}

<header>
  <div class="header-top"></div>
  <div class="header-bottom">
    <div class="logo"></div>
  </div>
</header>

<section></section>