Div内容与表格内容重叠

我有一个表格如下。在表后的股利内容放在桌子上，而不是重叠，要对新行Div内容与表格内容重叠

<table border="0" style="width:680px;position:relative !important;"> 
    <tr> 
     <td class="row1" style="background:red">1</td> 
     <td class="row2" style="background:green">2</td> 
    </tr> 
</table> 
<div style="position:relative !important;">22</div>

，这是CSS

.row1 { 
     width:405px; 
     position:absolute; 
    } 
    .row2 { 
     width:273px; 
     position:absolute; 
     left:390px; 
    }

可一些身体请帮我解决这个问题？ div内容应位于表格内容下方的新行中。在此先感谢

来源

2011-07-09 htmllearner

这是因为您的表没有高度。高度崩溃，因为你已经完全放置了表格单元格。简单的修复就是增加一个高度（如果总是已知的话），但是这根本不是很健壮。

如果您张贴了你想要做的（主要是为什么你定位绝对），我们可以帮助进一步帮助:)

来源

2011-07-09 14:31:35 lnrbob

我有两个理由可见td的绝对值是因为第二个td应该与我的第一个td的一部分重叠。 – htmllearner

只需删除第一个“”的绝对位置即可。请记住，您需要注意，您的身高总是匹配 – lnrbob

替代使用位置：相对于第二个“”，并设置“left：-20px”或重叠应该是大的。在这种情况下，这将是唯一的'位置'，需要设置 – lnrbob

您的两个<td> s为position: absolute将不会保留<table>开放。您将需要

分配height您table
删除absolute上td小号
或补充足够margin-top您div，它会坐在你见下表。

鉴于上述信息，第二个选项可能是你想要的。

来源

2011-07-09 14:32:08

我有两个td作为绝对的原因是因为第二个td应该重叠我的第一个td的一部分td – htmllearner

这是因为你设置的位置：在CSS中绝对的：这意味着正常流动被破坏，overlaps.If你该元素删除，你没有问题：

小提琴http://jsfiddle.net/BHLhS/1/

来源

2011-07-09 14:32:09

我之所以将td作为绝对的原因是因为第二个td应该重叠我的第一个td的一部分 – htmllearner

*更新：真的不知道你想达到什么目的，但这是一种实现目标的方法。

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <style type="text/css"> 
      /* Wrapper container for the table and thd div below it. */ 
      .abs-div { 
       position: absolute; 
      } 
      /* First td inside the table. */ 
      .row1 { 
       float: left; 
       margin-right: -15px; 
       width: 405px 
      } 
      /* Second td within the table, but it's on the same row as the first td, but called row-2 for some reason. */ 
      .row2 { 
       float: left; 
       width: 273px 
      } 
      /* Div below table. */ 
      .div-below-table { 
       position: relative !important; 
      } 
     </style> 

    </head> 
    <body> 
     <div class="abs-div"> 
      <table border="0" style="width:680px;position:relative !important;"> 
       <tr> 
        <td class="row1" style="background:red">1</td> 
        <!-- Should this be on it's own row --> 
        <td class="row2" style="background:green">2</td> 
       </tr> 
      </table> 
      <div class="div-below-table">22</div> 
     </div> 
    </body> 
</html>

来源

2011-07-09 14:50:44 b01

我发现在我的项目中使用的最简单的方法是使用一种风格在底部添加填充，使得即使是重叠对用户不

.padding_for_footer250 { 
    padding-bottom: 250px; 
}

来源

2013-06-28 08:04:27 Nav

Div内容与表格内容重叠

回答

相关问题