элемент, расположенный справа перекрывает таблицу

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. Что я могу сделать с этим?

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

Answer 1

Вы используете абсолютное позиционирование так взял DIV из потока. Следовательно, для таблицы div не существует. Для достижения желаемого: вы можете установить положение: относительное; для div & переместите поле соответственно справа, установив его свойство left в 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 
 
{ 
 
\t border: 2px solid #AAAAAA; 
 
    \t padding: 20px; 
 
}

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

Проверьте Ваш updated fiddle.