为什么第二个div显示在它之前的第一个div下？

Question

我有以下情况（我无法发布在线小提琴，因为它是使用Struts 2标记的JSP的渲染结果）。在页面中我有这样的东西：

<td id="rightColumn" width="66.6%">
    <div id="resultEvents" class="class java.util.HashMap">
        <table class="contacts" width="100%">
            <tbody>
                <tr>.....</tr>
                <tr>.....</tr>
                <tr>.....</tr>
                <tr>.....</tr>
                <tr>.....</tr>
             </tbody>
         </table>

         <br>

    </div>

    <div id="wwctrl_submitButton" align="right" style="display: block">
        <input id="submitButton" type="submit" style="" onclick="return validateForm();" value="Submit" name="action:projectCreationAction">
    </div>
</td>

这是获得的结果：

正如您所看到的那样，问题在于此div内容所代表的提交按钮：

<div id="wwctrl_submitButton" align="right" style="display: block">
    <input id="submitButton" type="submit" style="" onclick="return validateForm();" value="Submit" name="action:projectCreationAction">
</div>

出现在其上一个div（具有 id = resultEvents 的div）

之下

这是与之前的HTML代码段相关的CSS：

#treeFormContainer {
    min-height: 250px;
}

#rightColumn {
    position: relative;
}

#resultEvents {
    position: absolute;
    top: 0;
}

如何防止此行为并显示div id =＆＃34; wwctrl_submitButton＆＃34; 在前一个div id =＆＃34; resultEvents＆＃34;

我错过了什么？我该如何解决这个问题？

TNX

Answer 1

没有小提琴可以用来玩。 但是我可以在你的表和div关闭后看到一个关闭的td标签。尝试删除它，因为它可能会影响布局。

Answer 2

如果你的问题是wwctrl_submitButton div直到表结束后才开始的原因，那是因为resultEvents div绝对定位，所以wwctrl_submitButton div是如果第一个div根本没有出现在它所绘制的位置。

解决方案：将div放在表格下方的位置，例如position:absolute和top值至少与表格高度一样大。
或者，如果您可以更改HTML，请将第二个div直接放在表格的后面，在第一个div中。

或者如果您的问题是为什么表格是在wwctrl_submitButton div的顶部绘制的，那么带有position:absolute的元素会在没有定位的元素上绘制。

那么解决方案就是给wwctrl_submitButton一个position，例如position:relative，而不做任何其他事情。

Answer 3

添加此css替换绝对位置：

 #resultEvents {
    position: relative;
    top: 0;
}