Relative

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

Координаты: left, top, right, bottom

Используется ТОЛЬКО совместно со свойством position. В зависимости от конкретного значения position свойства left, top, right, bottom могут сдвигать элемент направо, вниз, налево, вверх относительно левого, верхнего, правого или нижнего краев.

Стакан

Возникает вопрос - относительно каких таких краев двигают элемент координатные свойства?

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

Но самое интересное, что этот позиционированный бокс сам внутри себя создает такой же стакан, и все его дети (боксы, находящиеся у него внутри) позиционируются уже относительно него, а не относительно окна. И внутри него происходит то же самое: любой позиционированный (не static) бокс создает внутри себя такой стакан.

В терминах CSS, этот стакан называется "содержащим блоком" (containing block).

Date: 2016-02-19; view: 364; Нарушение авторских прав