div重叠问题

Question

我有 div，如 FIDDLE 所示，div 内容与标题重叠，导致内容数据被隐藏，即“示例数据 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 #标题 { 位置：相对； } #firstdiv { 浮动：左；宽度：100%； 位置：绝对； 白颜色; }

谢谢

Answer 1

从#firstdiv 元素中移除绝对定位。左浮动似乎也没有必要。

请看这里：http://jsfiddle.net/k8Vut/2/

Answer 2

在标题中添加一些填充：http://jsfiddle.net/k8Vut/3/

   #header
   {
       padding-top: 25px;
   }

由于您的 firstdiv 是绝对的，它将从 top: 0 位置开始，因此会覆盖相对定位的标题。因此，如果您添加一些填充，它会将标题移动到下方并为firstdiv腾出空间