От автора: одним из наиболее полезных инструментов в CSS, на мой взгляд, является позиционирование элементов документа. Под термином «позиционирование» понимается возможность расположить элемент (блок, картинку и др.) в абсолютно любом месте документа.
Полезность этого свойства увеличивается прямо пропорционально сложности макета сайта. В уроке мы детальнее рассмотрим это полезное свойство. Сама же тема урока взята из вопросов, поступивших в нашу службу поддержки в один и тот же день.
Для начала давайте рассмотрим классический пример, где нам потребуется использование позиционирования… к слову, пример этот как раз и взят из одного из упомянутых выше вопросов. Итак, на указанной части шаблона:
мы имеем 2 логические части — шапка и блок меню. При этом оба блока содержат в себе части единой картинки — автомобиля «заезжающего» с шапки на меню. Теоретически здесь мы могли бы обойтись и без позиционирования. Для этого достаточно было бы вырезать картинку шапки и фон меню, при этом на каждой из картинок присутствовала бы своя часть автомобиля:
Но этот вариант далеко не оптимален. Гораздо лучше было бы, если бы у нас имелась отдельно картинка автомобиля, которая совсем не зависела бы от остального потока элементов. В этом случае мы смогли бы «таскать» автомобиль, выбирая для него нужное расположение. Как раз такую возможность нам предоставляет свойство CSS под названием position.
Указанное свойство имеет следующие возможные атрибуты: position: absolute | fixed | relative | static
Относительно атрибута static следует заметить, что его можно не использовать вообще, поскольку изначально это атрибут любого элемента на странице, поэтому если указать для элемента свойство position:static, то абсолютно никаких изменений мы не увидим.
А вот 3 других атрибута — весьма полезны. Для начала давайте укажем описание каждого из них.
— absolute (абсолютный). Указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на веб-странице словно абсолютно позиционированного объекта и нет. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.
— fixed (фиксированный). По своим свойствам это значение аналогично аргументу absolute, но в отличие от него привязывается к указанной параметрами left, top, right и bottom точке на экране и не меняет своего положения даже при пролистывании веб-страницы.
— relative (относительный). Положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения, в зависимости от применяемого параметра.
Итак, как же мы можем осуществить задуманное. Все просто. Нам известна ширина макета сайта (она фиксирована). Соответственно, все что потребуется — это разместить картинку, к примеру, в шапке и спозиционировать ее относительно шапки. «Сдвигать» картинку мы можем посредством упомянутых атрибутов left (сдвиг от левой границы), top (сдвиг от верхней границы), right (сдвиг от правой границы) и bottom (сдвиг от нижней границы). Во всех четырех случаях границами будут границы элемента, относительно которого осуществляется позиционирование. И вот здесь есть небольшой нюанс, который мы сейчас увидим.
Итак, картинку автомобиля мы вырезали из макета и размещаем ее в шапке:
|
1 2 3 4 5 |
<div class="head" id="div1"> <a href "/"> Записки Путешественника</a> <h2>на своем АВТО<br>и не только...</h2> <img src="images/car.png" width="244" height="172" alt="" class="car" /> </div> |
В результате автомобиль расположится между ссылкой (для нее установлено выравнивание float:left) и заголовком второго уровня (для него установлено выравнивание float:right) в шапке. Пока что наша картинка находится в потоке элементов. Теперь давайте «изымем» ее из этого потока, чтобы ее можно было передвигать. Установим для элемента с классом car абсолютное позиционирование:
|
1 |
.car{position:absolute;} |
Если сейчас обновить страницу, то никаких изменений мы не увидим. Все потому, что мы пока что не указали те самые атрибуты left, top, right и bottom. Для позиционирования элемента необходимо указывать 2 атрибута (1 из них должен отвечать за горизонтальное движение, второй — за вертикальное… например, пара left-top или left-bottom, или right-top и т.д.).
Для начала давайте укажем нулевую точку отсчета для картинки, прижав ее к верхнему левому углу:
|
1 2 3 4 5 |
.car{ position:absolute; left:0; top:0; } |
Теперь, если обновить страницу, то мы сможем увидеть, что картинка действительно оказалась в верхнем левом углу, но не шапки, как мы могли ожидать… картинка прижалась к левому верхнему углу браузера:
Почему так произошло? Дело в том, что задав абсолютное позиционирование элементу, он начинает позиционироваться относительно элемента body. Как же сделать так, чтобы элемент позиционировался относительно другого конкретного элемента, например, относительно своего родителя — шапки? Все очень просто. Для этого мы можем задать родительскому элементу, к примеру, свойство относительного позиционирования. После этого дочерний блок будет позиционироваться уже относительно своего родителя, а не относительно элемента body.
|
1 2 3 4 5 6 7 8 9 |
.head{ height: 250px; position:relative; } .car{ position:absolute; left:0; top:0; } |
При этом заметьте, что элемент уже вне потока документа, т.е. другие элементы его попросту «не замечают» — автомобиль перекрывает ссылку, игнорируя свойство обтекания float:left. Отлично, мы спозиционировали картинку относительно родителя. Осталось подивнуть ее на определенное количество пикселей от левой и верхней границ родителя (атрибуты left-top). Здесь можно взять соответствующие координаты из макета фотошопа или использовать другие удобные инструменты… или просто выровняв картинку «на глаз».
|
1 2 3 4 5 |
.car{ position:absolute; left:450px; top:140px; } |
И мы добиваемся необходимого результата:
Ничего сложного нет. Поскольку макет я взял из вопроса пользователя — я не буду его прикладывать к дополнительным материалам. Практически аналогичный макет Вы можете найти в нашем курсе – Как нарисовать обалденный дизайн сайта с нуля, сверстать его и установить на WordPress
Для закрепления материала давайте решим следующую задачу, используя возможности позиционирования. Итак:
1. Необходимо разместить блок со строго заданными размерами по центру документа.
2. В этом блоке необходимо спозиционировать дочерний блок относительно его родителя.
3. Также необходимо создать блок, который должен быть прижат к левой границе браузера и при этом его положение должно быть фиксированным, т.е. он должен оставаться на месте, несмотря на возможную прокрутку документа.
Начнем с первого. Имеем блок со следующими размерами: ширина — 500 пикселей, высота — 300 пикселей. Необходимо центрировать этот блок относительно окна браузера. Вполне очевидно, что здесь мы должны воспользоваться относительными величинами (процентами), поскольку разрешение у каждого конкретного пользователя может отличаться — это и 1024*768, и 1440*900, и масса прочих.
Указываем разметку блока:
|
1 |
<div class="block"></div> |
Его стили:
|
1 2 3 4 5 6 7 8 |
.block{ width:500px; height:300px; border:1px solid red; position:absolute; left:50%; top:50%; } |
Если посмотреть результат в браузере, то увидим, что сейчас центрирована левая верхняя точка блока. Это логично, поскольку эта точка является своеобразным началом системы координат блока. И именно эту точку мы отодвинули от левого верхнего угла браузера на 50% (left:50%; top:50%). Мы центрировали вершину блока, но каким образом центрировать блок? Здесь все просто. Для реализации задуманного мы воспользуемся отступами (свойство margin) и подвинем блок вверх на половину его высоты и влево на половину ширины. Таким образом, мы получим центр самого блока, который и совпадет с центром документа:
|
1 2 3 4 5 6 7 8 9 |
.block{ width:500px; height:300px; border:1px solid red; position:absolute; left:50%; top:50%; margin:-150px 0 0 -250px; } |
Теперь второе задание. Здесь просто. Создаем разметку дочернего блока:
|
1 2 3 |
<div class="block"> <div class="child"></div> </div> |
И его стили:
|
1 2 3 4 5 6 7 8 |
.child{ width:200px; height:100px; border:1px solid #000; position:absolute; left:100px; top:50px; } |
Ничего нового здесь нет — все тоже мы делали с автомобилем за тем исключением, что здесь родительский блок имеет свойство position:absolute (в первом примере для родителя мы устанавливали position:relative). Однако здесь мы все равно получили нужный результат, поскольку неважно какое свойство задано для родителя (absolute или relative) — дочерний блок все равно будет позиционирован относительно родителя.
И последнее задание. Со свойством position:fixed мы пока что не работали, но ничего сложного там также нет. Данное свойство очень похоже на position:absolute за одним исключением: элемент с таким свойством «привязывается» к точке окна браузера с указанными координатами.
Создаем разметку:
|
1 2 3 4 |
<div class="block"> <div class="child"></div> </div> <div class="fix"></div> |
И стили:
|
1 2 3 4 5 6 7 8 |
.fix{ width:20px; height:150px; border:1px solid #000; position:fixed; top:200px; left:0; } |
Таким образом, мы указали, что блок всегда будет прилегать к левой границе документа (left:0;) и всегда будет иметь отступ от верхней границы 200 пикселей (top:200px;). Для того, чтобы убедиться в этом, достаточно увеличить высоту блока с классом block для получения полосы прокрутки. Теперь, если прокручивать документ, фиксированный блок всегда будет занимать одну и ту же позицию относительно окна браузера.
Вот и все. Как и говорил, ничего сложного в свойсте position нет, но используя это свойство можно создавать сайты с довольно сложным дизайном. На этом наш урок завершен. Ваши вопросы и отзывы всегда будем рады видеть в комментариях. Удачи в Ваших разработках и до новых встреч!
Комментарии (11)