relative и absolute

Обычно относительное позиционирование само по себе применяется не часто, поскольку для смещения элемента от его исходного положения есть ряд других свойств, к примеру, margin или transform. Но комбинация разных типов позиционирования для вложенных элементов является одним из удобных и практичных приёмов вёрстки. Если для родительского элемента задать relative, а для дочернего absolute, то произойдёт смена системы координат и положение дочернего элемента при этом указывается относительно его родителя (рис. 1).

Значения свойств left, right, top и bottom для вложенного элемента

Рис. 1. Значения свойств left, right, top и bottom для вложенного элемента

Отсчёт координат ведётся от внутреннего края границы, значения padding не учитываются. В примере 1 прямоугольник располагается в правом нижнем углу блока возле границы.

Пример 1. Использование position

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Положение элемента</title> <style> .block-1 { position: relative; /* Относительное позиционирование */ background: #3989c9; /* Синий цвет фона */ min-height: 160px; /* Минимальная высота */ padding: 20px; /* Поля */ border: 2px solid #000; /* Параметры границы */ } .block-2 { position: absolute; /* Абсолютное позиционирование */ right: 0; bottom: 0; /* Положение элемента */ background: #feea3f; /* Жёлтый цвет фона */ width: 50px; height: 50px; /* Размеры элемента */ } </style> </head> <body> <div class="block-1"> <div class="block-2"></div> </div> </body> </html>

Результат данного примера показан на рис. 2.

Положение вложенного элемента относительно родителя

Рис. 2. Положение вложенного элемента относительно родителя

Для родителя допустимо указывать значение relative, absolute, fixed или sticky. Если у дочернего элемента свойство position задано как absolute, то отсчёт координат ведётся от родителя. В примере 2 показано сочетание абсолютного позиционирования для размещения даты в левом верхнем углу фотографии.

Пример 2. Использование absolute

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Вывод даты</title> <style> figure, .pub { position: absolute; /* Абсолютное позиционирование */ } .pub { background: #3989c9; /* Синий цвет фона */ color: #fff; /* Цвет текста */ left: 10px; top: 10px; /* Положение даты */ text-align: center; /* Выравнивание по центру */ padding: 5px 10px; /* Поля вокруг текста */ min-width: 40px; /* Минимальная ширина */ border: 2px solid #fff; /* Параметры рамки */ } .date { font-size: 28px; /* Размер шрифта */ } </style> </head> <body> <figure> <img src="image/blueberry.jpg" alt="Голубика"> <div class="pub"> <div class="date">15</div> <div class="month">авг</div> </div> </figure> </body> </html>

Результат данного примера показан на рис. 3.

Вывод даты в левом верхнем углу

Рис. 3. Вывод даты в левом верхнем углу

Сочетание относительного и абсолютного позиционирования можно применять и к псевдоэлементам ::before и ::after. Это сокращает размер кода HTML, поскольку нам уже не нужны лишние элементы, и позволяет делать всякие интересные декоративные эффекты. В примере 3 показано создание всплывающей подсказки.

Пример 3. Создание всплывающей подсказки

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Всплывающая подсказка</title> <style> [data-tooltip] { position: relative; /* Относительное позиционирование */ } /* Выводим треугольник */ [data-tooltip]:hover::before { content: ''; position: absolute; top: 1.4em; left: 20px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #3989c9; } /* Выводим саму подсказку */ [data-tooltip]:hover::after { content: attr(data-tooltip); /* Выводим текст */ position: absolute; /* Абсолютное позиционирование */ width: 400px; /* Ширина подсказки */ left: 0; top: 2em; /* Положение подсказки */ background: #3989c9; /* Синий цвет фона */ color: #fff; /* Цвет текста */ padding: 0.5em; /* Поля вокруг текста */ border-radius: 5px; /* Скругляем уголки */ } </style> </head> <body> <p>Текст до строки.</p> <p data-tooltip="Всплывающая подсказка сообщает о чём-то многозначном и полезном..."> Наведи сюда курсор.</p> <p>Текст после строки.</p> </body> </html>

Текст самой подсказки мы пишем в пользовательском атрибуте data-tooltip и выводим его с помощью свойства content со значением attr(data-tooltip). Остальной код CSS используется для оформления этого текста (рис. 4).

Вид всплывающей подсказки

Рис. 4. Вид всплывающей подсказки

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

Рис. 1

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Фотография коктейля</title> <style> body { background: #f7f6f2; } .cocktail { display: inline-block; padding: 12px; margin: 0; position: relative; overflow: hidden; } .cocktail::after, .cocktail::before { content: ''; position: absolute; z-index: 2; width: 70px; height: 70px; left: -40px; bottom: -40px; transform: rotate(45deg); box-shadow: 0 0 10px rgba(0,0,0,.5); outline: #c2b59d dashed 1px; outline-offset: -3px; background: #f7f6f2; } .cocktail::after { left: auto; right: -40px; top: -40px; } .cocktail img { display: block; padding: 4px; background: #dad6cf; border: 2px solid #c2b59d; } </style> </head> <body> <figure class="cocktail"> <img src="image/cocktail.jpg" width="200" height="200" alt="Коктейль"> </figure> <figure class="cocktail"> <img src="image/cocktail-2.jpg" width="200" height="200" alt="Коктейль"> </figure> </body> </html>

Создайте веб-страницу, показанную на рис. 1. Поверх фотографии в правом нижнем углу выводится картинка с полупрозрачным фоном (прозрачность 50%).

Рис. 1

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Увеличить фото</title> <style> figure { position: relative; display: inline-block; } img { display: block; } .expand { position: absolute; width: 30px; height: 30px; right: 15px; bottom: 15px; padding: 5px; background: rgba(255, 255, 255, 0.5) url(/example/image/expand.png) 50% 50% no-repeat; background-size: 30px; border: 1px solid #333; } </style> </head> <body> <figure> <img src="image/dessert.jpg" alt="Десерт"> <a href="#" class="expand"></a> </figure> </body> </html>

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 01.06.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты