Позиционирование блоков.



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

  • блочные элементы располагаются один под другим,
  • строчные элементы располагаются один за другим

Позиционирование обозначается свойством position.

Основными методами позиционирования являются:

  • Абсолютное позиционирование position:absolute;
  • Относительное позиционирование position:relative;

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


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

Ключевыми словами абсолютного позиционирования являются:

  • top - задает смещение блока относительно верхнего края экрана;
  • right - задает смещение блока относительно правого края экрана;
  • bottom - задает смещение блока относительно нижнего края экрана;
  • left - задает смещение блока относительно правого края экрана.




Создадим обычный текст с рисунком.

   ПРИМЕР


Позиционируем изображение. Указываем только две координаты, т.е. привязка идет к любому из углов документа. Для этого зададим следующие параметры:

Пример записи кода:

.inet { position:absolute; top:150px; right:150px; }

Для применения класса к изображению, пишем <img class="inet">


РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР


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

.inet { position:fixed; top:150px; right:150px; }

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР


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


При относительном позиционировании используется свойство position:relative и свойства смещения. При абсолютном позиционировании смещение производится относительно родительского элемента, при относительном смещение относительно самого блока в нормальном потоке.

Вот обычный документ с рисунком.

   ПРИМЕР


Позиционируем изображение относительно нашего рисунка.

.inet { position:relative; top:150px; left:150px; }

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР


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
















Далее рассмотрим: Плавающие блоки