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放在位置：relative和.logo就位：绝对。然后使用顶部和左侧将其放置在您想要的位置。示例：

＆＃13;

＆＃13;

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

＆＃13;

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

<section></section>

＆＃13;

＆＃13;

＆＃13;