позиция абсолютная и относительная по положению

Question

Я сбиваю с толку положение абсолютное и относительное в css. см ниже элемента

<div id="container" style="position:"relative"> 
.......................................... 

<button style="position:"absolute"; left:10px;" > 

</div> 

когда я установить позицию абсолютного и слева, как 10 пикс кнопка означает, что она не занимает позицию из окна браузера, вместо этого она занимает позицию от родительского DIV (контейнера), так как контейнер позиция относительна. Зачем ?

Когда я устанавливаю позицию абсолютной для любого элемента, она занимает позицию только из окна браузера. почему он проверяет родительский элемент и затем позиционирует.

, когда я устанавливаю позицию относительно любого элемента, означает, что время будет позиционировать на основе родительского элемента.

p>Paragraph 1.</p> 
<p>Paragraph 2.</p> 
<p style="position: relative;left: 2em;">Paragraph 3.</p> 

В приведенном выше примере третий абзац будет помещен 3em с левой стороны элемента контейнера.

Я исследовал следующие ссылки.

http://webdesign.about.com/od/advancedcss/a/aa061307.htm

http://www.barelyfitz.com/screencast/html-training/css/positioning/

абсолют -> занимает позицию из окна браузера

относительны -> занимает позицию от родительского элемента

ничего я неправильно понял?

Благодаря,

Шива

Answer 1

Абсолютное положение элемент позиционируется относительно первого родительского элемента, положение которого не является статическим. Если такой элемент не найден, то содержащий блок является элементом html.

Answer 2

Абсолютный

позиционирован относительно первого родительского элемента, который relative или absolute (по умолчанию окна HTML/браузера) - это означает, что наличие relative родителя, вызывает все дочерние элементы должны быть расположены относительно этого элемента, когда используя absolute

Относительная

расположен относительно его первоначальной статической позиции (родитель не участвует) - может быть использован для слегка переместить элемент от его текущего положения, не затрагивая макет

элементов Fixed

В зависимости от ваших требований использования, другой вариант position:fixed который держит элемент позиционируется относительно окна браузера, независимо от родительского стиля (полезно для модальных окон, так как элемент остается там, где она есть, даже при прокрутке)

Дополнительное чтение:http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/