位于右侧的元素重叠表

Question

我有HTML代码：

<div id="right">right</div>
<table>
    <tr><td>row</td></tr>
</table>

用css：

#right
{
    position: absolute;
    right: 0px;
    border: 2px solid #AAAAAA;
    padding: 20px;
}

因此表和div都从页面顶部开始，但我希望表在div下面开始。我该怎么办呢？

jsFiddle：http://jsfiddle.net/jrkno49u/

Answer 1

您正在使用绝对定位，因此它将div从流中取出。因此对于表格而言，div并不存在。 要达到你想要的效果：你可以为div和amp设置 position：relative; 。通过在css中设置它的左侧属性，相应地将框移动到右侧。

Answer 2

您也可以执行浮动而不是绝对定位，然后清除表中的浮点数：

#right
{
    float:right;
    border: 2px solid #ddd;
    padding: 20px;
}
table {
    clear: right;
}

http://jsfiddle.net/jrkno49u/2/

Answer 3

你不需要再做什么了。只需从position: absolute; right: 0px;

中删除#right即可

#right
{
	border: 2px solid #AAAAAA;
   	padding: 20px;
}

<div id="right">right</div>
<table>
    <tr><td>row</td></tr>
</table>

检查updated fiddle.