HTML元素重叠

我正在处理一个ASP.Net网页，其中两个表格位于页面中央，一个在另一个之上。顶部的表格包含由代码隐藏动态生成的输入字段，因此输入字段的数量会有所不同。底部的表格包含的内容是不变的，不会改变。该页面的布局是固定的，并且必须保持如此。我的问题是，如何使底部表格动态调整垂直，以便它不与顶部表格中的字段重叠。页面的HTML一般布局类似如下：HTML元素重叠

<body style="vertical-align: middle; text-align: center;"> 
    <div id="container" style="position: relative; width: 910px; margin: 0px auto;"> 
    <form> 
     <div style="width: 908px; text-align: center; margin: 75px auto; position: absolute; top: 0px; visibility: visible;"> 
      <table id="topTable"></table> 
     </div> 

     <table id="bottomTable" style="width: 908px; margin: 0px auto; position: absolute; top: 400px;"></table> 
    </form> 
    </div> 
</body>

我想要达到的效果是：

顶级表内容

场1 ：...

字段2：...

场3：...

。

。

。

等

底表内容

提交按钮

我想我可以换底表中一个div，但我不知道是什么具体的造型会达到预期的效果。我基本上想要保持水平固定的位置，但有垂直对齐调整，以防止与顶部重叠。

UPDATE：

这里是一个屏幕帽，显示了两个表重叠。您看到的按钮位于底部表格中，字段应该位于顶部，所有元素都完全位于浏览器屏幕的中心。

enter image description here

更新2：

我与当前正在使用的样式更新上述HTML范例。

来源

2011-03-29 kingrichard2005

我不知道我明白。这是多个表的默认行为。你能举出一个他们重叠的例子吗？ – Sam 2011-03-29 20:43:34

默认情况下，块元素垂直扩展以容纳其内容。你显然有CSS会导致你这种不需要的行为。您需要向我们提供CSS。 – Llyle 2011-03-29 21:02:19

对不起，我在上面的HTML示例中添加了样式。我也忘记了包括表格在表格内的事实，不知道这是否有所作为。 – kingrichard2005 2011-03-29 21:18:40

溢出正在发生的原因是因为你用绝对定位。（position: absolute;）因为您的底部表格也是绝对定位的，所以您会体验到溢出。

如果你想要底部的表是顶见下表那就试试这个：

<div style="position: absolute; top: 0px;"> 
    <table id="topTable"> 
    ... 
    </table> 
    <table id="bottomTable"> 
    ... 
    </table> 
</div>

在这里，我们已经把底部的表，它包装顶部的表，也去掉了绝对定位的DIV中。

来源

2011-03-29 22:16:18 Llyle

当您列出序列中的两个div元素时，第二个div将随着第一个div元素的减小或增加大小而上下移动。（无浮=明确：CSS和也绝对定位）

你只需要删除您的位置：从你的元素和你的元素的护理正确摆放在你的表绝对的CSS属性。请记住不要将高度分配给div或table元素。

如果将每个元素放在表格的右侧单元格中，则不会发生错误。所以就这样做，但要小心。

只是改变你的代码是这样的：

<body style="vertical-align: middle; text-align: center;"> 
<div id="container" style="position: absolute;top:0px; width: 910px; 
    margin: 0px auto;"> 
    <form> 
     <div style="width: 908px; text-align: center; margin: 75px auto;"> 
      <table id="topTable"></table> 
     </div> 

     <div style="width: 908px; text-align: center; margin: 75px auto;"> 
      <table id="bottomTable" style="width: 908px; margin: 0px auto;"></table> 
     </div> 
    </form> 
</div>

来源

2011-03-29 20:42:39

HTML元素重叠

回答

相关问题