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 索引做一些事情，但效果不佳 ;)

而且，顺便说一句，我怎样才能去掉页眉底部和内容之间的白色 space？ paddings 和 margins 都设置为 0，所以我不知道为什么它们不是直接相邻的。

Answer 1

只需将 .header-bottom 放在 position:relative 中，将 .logo 放在 position: absolute 中。然后使用顶部和左侧将其放置在您想要的位置。示例：

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>

div 高于其他 div

div above other divs

css

z-index