Почему поля ведут себя одинаково для позиции абсолютной / относительной - PullRequest
Новая
       42

Почему поля ведут себя одинаково для позиции абсолютной / относительной

1 голос
/ 12 февраля 2012

Я вижу, что верхние / левые свойства отображают разницу с абсолютной позицией и относительной позицией, как и должно быть.

Когда я устанавливаю margin-top на позиции: относительно, она правильно позиционируется в соответствии с контейнером.НО, когда я устанавливаю margin-top на position: absolute, я думаю, что он должен располагаться в соответствии с элементом BODY, но он позиционируется так же, как position: относительный, который относительно содержащего элемента (#container).И я не установил ни одного элемента нестатично.

Вот код с позицией: относительный http://jsfiddle.net/uFta4/

А вот с позицией: абсолютный http://jsfiddle.net/uFta4/2/

Обратите внимание, что #firstDiv расположен в том же месте, что относительно контейнера #.

Должно ли оно быть относительно элемента BODY?

Ответы [ 2 ]

1 голос
/ 13 февраля 2012

Это потому, что между элементами RP и AP есть различие в том смысле, что элементы RP "сворачивают" свои поля, в то время как элемент AP не уменьшает их поля.Вот почему вы видите элемент AP в той же позиции, потому что он также учитывает поле BODY, которое вы указали в его теге.

Чтобы вы лучше поняли, я поместил пару кодов.Посмотрите на следующие варианты и наблюдайте различное разрушение границ поведения элементов RP и AP.RP

  1. Сжатие полей элемента RP http://jsfiddle.net/uFta4/6/
  2. Добавлены поля элемента AP http://jsfiddle.net/uFta4/7/
  3. Элементы AP с добавленным полем -ve (становится -20px) http://jsfiddle.net/uFta4/9/
  4. RP элементы с -ve отступом поля (не становится -30px) http://jsfiddle.net/uFta4/10/

Надеюсь, теперь это будет вам понятно.

1 голос
/ 12 февраля 2012

Поля должны вести себя одинаково для position:absolute и position:relative.

В первом примере относительно позиционированного элемента не установлены значения положения, поэтому эффекта нет.

Во втором примере абсолютно позиционированный элемент также не имеет значений положения, поэтому он находится в верхнем левом углу тела. Это 60px сверху для учета поля в 20px на теле и 40px на самом элементе.

И, чтобы процитировать спецификацию ...

Поля абсолютно расположенных блоков не разрушаются (даже при их дочерних элементах в потоке).

...