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/