Дизайн HTML-страниц. Язык CSS (ч.7)

Позиционирование блоков на странице - очень важный элемент в верстке страницы.

Что вообще такое позиционирование? С помощью него вы можете определять положение одних блоков относительно других.

По традиции, для лучшего понимания перейдем к объяснению сразу на примерах.

Создадим такую HTML-страницу:

У первого и второго блока два разных класса "block_1" и "block_2" соответственно.

Опишем их в CSS:

Обычные прямоугольники с синей рамкой и белым фоном. (Зачем я задал именно белый фон поймете потом). Пока эти два класса выглядят одинаково. В браузере это выглядит так:

Позиционирование задается через параметр position в CSS

position: static; - такой параметр есть у каждого блока по умолчанию, даже если вы его не укажете. Блок с таким параметром отображается как обычно и не позиционируется как-то по особенному.

position: relative; - тут все интереснее. Если у вас есть на странице один блок с таким классом, то вести он себя будет точно так же как и static

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

Рассмотрим на наших примерах:

К обоим классам я добавил параметр position: relative; - ничего не изменилось.

Но нам нужно переместить второй блок относительно первого. Для этого в описание класса второго блока мы будем добавлять какие-то из этих параметров:

top: -15px;

left: 15px;

bottom: 15px;

right: 15px; (значения в пикселях приведены для примера)

Эти параметры используются для сдвига блока в различные стороны относительно его начального положения (top - сдвиг от начальной верхней границы, left - от начальной левой, bottom - от нижней, right - от правой)

Следовательно нельзя одному классу давать параметры для сдвига по одному направлению одновременно (например top и bottom или left и right нельзя использовать вместе. Вообще можно, но один из параметров не применится)

Давайте вернемся к нашему примеру и добавим второму блоку такие два параметра:

top: -15px;

left: 20px;

Смотрим результат:

Мы видим, что относительно своего начального положения второй блок сместился вверх на 15 пикселей и влево на 20 пикселей. (Чтобы увидеть результат наглядно мы как раз и сделали цвет фона блока белым, иначе он был бы прозрачным по умолчанию и трудно было бы разобраться что произошло с рамками)

Что получаем в итоге: если мы указываем отрицательное значение в пикселях, то блок сдвигается туда, как называется параметр (например top: -15px; - сдвиг к "top" или "верху" на 15 пикселей;). Если указано положительное значение, то блок сдвигается от названия параметра (left: 20px; - от левой грани на 20 пикселей) - такое правило удобно для запоминания. Хотя лучше всего попрактиковаться и запомнить на своем примере.

position: fixed; - "приклеивает" элемент к странице. При прокрутке он окажется на том же месте экрана вашего компьютера (обращаю внимание - на том же месте экрана, а не страницы. На странице блоки и так приклеены по умолчанию)

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

Да, и чуть не забыл - фиксировать можно любые блоки, не обязательно иметь на странице еще один блок с параметром position: relative;

И последний вид позиционирования:

position: absolute; - работает только если на странице есть еще один элемент с параметром position: relative;

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

Рассмотрим пример:

Тут я увеличил размеры первого блока, добавил второму классу параметр position: absolute; и top: 120px;

Вот что получилось. Второй блок теперь позиционируется относительно границ первого блока, т.к. он имеет параметр relative. (top: 120px; - отступ относительно верхней границы на 120 пикселей)

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

@honey_and_money - Не бойся трудностей на пути - думай о результате, который тебя ждет