在html頁面上其他部分重疊的部分

Question

我用css創建了一個帶有一些佈局的頁面:)。問題是區域重疊標題區域：）...如何解決這個問題？標題區應該是在頂部，之後應該有顯示部分區域

jsfiddle

HTML代碼：

<header style="width: auto; outline: 1px solid red;position: relative; "> 
    <div style="width: 150px; outline: 1px solid green;">XXXXX picture XXXXX picture XXXXX picture</div> 
    <div style="width: 810px; height: 70px; outline: 1px solid yellow"> 
     <div style='position: relative; width: auto; height: 100%; outline: 1px solid red;'> 
     <div style="position:absolute; top:50%; height:20px; width: 100%; margin-top:-10px; outline: 1px solid green; "> 
     <div style="float: left; padding: 0 20;" class="blue">News</div> 
     <div style="float: left; padding: 0 20;" class="blue">Tax Tips</div> 
     <div style="float: left; padding: 0 20;" class="blue">Lifestyle</div> 
     <div style="float: right; padding: 0 20;">XXXXXX</div> 
     <div style="float: right; padding: 0 20;">XXXXXX</div> 
     </div> 
     </div> 
    </div> 
</header> 
<section> 
    <div class='post'> 
     <div class='post-title>'>TITLE TITLE TITLE TITLE</div> 
      <div class='tech-title>'> 
       <div class='added-by'>MARK NEWCOBE</div> 
       <div class='added-at'>10:10:00 12/12/2014</div> 
      </div> 
      <div class='post-body'> 
       <p>Body Body Body Body Body Body Body Body Body Body Body Body</p> 
       <p>Body Body Body Body Body Body Body Body Body Body Body Body</p> 
       <p>Body Body Body Body Body Body Body Body Body Body Body Body</p> 
       <p>Body Body Body Body Body Body Body Body Body Body Body Body</p> 
      </div> 
     </div> 
</section> 

CSS代碼：

.blue 
{ 
    color: blue; 
} 
.post 
{ 
    width: auto:  
} 

.added-by 
{ 
    float: left; 
    font-size: 10px; 
} 

.added-at 
{ 
    float: right;  
    font-size: 10px; 
} 

.post 
{ 
    //position: static;  
} 

Answer 1

首先，在所有我將建議您使用ClassSelectors而不是使用內聯樣式。

然後與你的問題是你使用absolute位置，頭節取出流的元素裏面的內容放置，然後不採取使他的容器height = 0任何空間。與float，而不是position:absolute儘量讓他們在線：

1. 取出內嵌樣式的絕對位置，然後添加這一點。

   header > div { 
       float:left; 
   } 
   header:after { 
       content:" "; 
       display:table; 
       clear:both; 
   } 
   

入住這DemoFiddle