Div重疊問題

Question

我有div，如FIDDLE所示，div內容與標題重疊導致隱藏內容數據，即「Sample data 1」。

<div id="header"> 
<div id="firstdiv"> 
    <table border="0px" width="100%" style="background-color:rgb(2, 44, 72)"> 
         <tr> 
          <td id="test1" style="width:90%;" align="left">test 

          </td> 
         </tr> 
        </table> 
</div> 

</div> 
<div id="content"> 
<table border="0"> 
    <tr> 
     <td>Sample data 1 
     </td> 
    </tr> 
    <tr> 
     <td>Sample data 2 
     </td> 
    </tr> 
    <tr> 
     <td>Sample data 3 
     </td> 
    </tr> 
    <tr> 
     <td>Sample data 4 
     </td> 
    </tr> 
</table> 
</div> 

// CSS 的#header { 位置：相對; } #firstdiv { float：left; width：100％; position：absolute; 顏色：白色; }

由於

Answer 1

添加一些填充到標題：http://jsfiddle.net/k8Vut/3/

#header 
    { 
     padding-top: 25px; 
    } 

由於您的firstdiv是絕對的，它會從頂部開始：0位置，因此覆蓋的相對定位頭。因此，如果添加一些填充，它會將標題稍微移動一點，併爲firstdiv

Answer 2

取下#firstdiv元件的絕對定位。左浮球似乎也是不必要的。

在這裏看到：http://jsfiddle.net/k8Vut/2/