Позиционирование блоков в CSS часть2

Позиционирование в CSS В предыдущей статье «Позиционирование блоков в CSS», были рассмотрены основы данной темы, и уделено внимание относительному позиционированию. Продолжим далее.

Абсолютное позиционирование

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

Для определения абсолютной позиции блока вполне достаточно указать два значения. Обычно используют пары: top — left, или top — right,реже применяют пары  bottom — left, или bottom — right, хотя, тут дело привычки. Важно помнить, если Вы не укажите значения координат блока, то он сам подскочит в левый верхний угол, со значениями по умолчанию top 0, и left 0.

Давайте сравним действие значений relative и absolute на ранее использованном примере, заменив у блока div позиционирование на absolute:

относительное позиционирование
абсолютное позиционирование

Как видно из нижнего рисунка — элемент списка поднялся и занял место контейнера div.

Следующий важный момент а абсолютном позиционировании — определение отправной точки для отсчета координат. Здесь в дело вмешивается значение свойства position у родителя. В случае, если род. элемента нет(на рисунке сверху), или родитель обладает свойством  position- static, значения берутся от рамки окна браузера. Во всех остальных случаях, как то: absolute, relative или fixed — координаты берутся от краев ближайшего род.элемента, с этими тремя показателями свойства position.

Фиксированное позиционирование
Фиксированное позиционирование похоже на абсолютное, но с отличием по двум позициям:

  1. Веб-элементы с позицией fixed буквально зафиксированы на месте и не перемещаются при прокручивании.
  2. Фиксировано позиционированные блоки всегда отталкиваются от окна браузера.

Есть еще некоторые моменты  свойства position, которые необходимо учитывать при размещении веб-элементов.

  • Первый нюанс. При абсолютном позиционировании элемента его внешние отступы не складываются с отступами соседей. Расстояние между такими блоками будет равно большему из отступов.
  • Второй нюанс — это недопустимость одновременного применения свойств position и float для одного элемента. Если же такая ошибка присутствует, то используется свойство, идущее последним.

Возможно может показаться, что позиционирование блочных элементов в CSS простое дело. Но эта мысль неверна. Для эффективного применения свойства position необходима солидная практика. Надо тренироваться, тренироваться, и еще раз тренироваться, как говаривал один известный дедушка.

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

Реклама

Оставить комментарий

Перед отправкой формы:
Human test by Not Captcha