格上述以外的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放置在位置：相對和.logo位置：絕對。然後使用頂部和左側將其放在您想要的位置。例如：

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>