relative и absolute
Обычно относительное позиционирование само по себе применяется не часто, поскольку для смещения элемента от его исходного положения есть ряд других свойств, к примеру, margin или transform. Но комбинация разных типов позиционирования для вложенных элементов является одним из удобных и практичных приёмов вёрстки. Если для родительского элемента задать relative, а для дочернего absolute, то произойдёт смена системы координат и положение дочернего элемента при этом указывается относительно его родителя (рис. 1).
Рис. 1. Значения свойств left, right, top и bottom для вложенного элемента
Отсчёт координат ведётся от внутреннего края границы, значения padding не учитываются. В примере 1 прямоугольник располагается в правом нижнем углу блока возле границы.
Пример 1. Использование position
Результат данного примера показан на рис. 2.
Рис. 2. Положение вложенного элемента относительно родителя
Для родителя допустимо указывать значение relative, absolute, fixed или sticky. Если у дочернего элемента свойство position задано как absolute, то отсчёт координат ведётся от родителя. В примере 2 показано сочетание абсолютного позиционирования для размещения даты в левом верхнем углу фотографии.
Пример 2. Использование absolute
Результат данного примера показан на рис. 3.
Рис. 3. Вывод даты в левом верхнем углу
Сочетание относительного и абсолютного позиционирования можно применять и к псевдоэлементам ::before и ::after. Это сокращает размер кода HTML, поскольку нам уже не нужны лишние элементы, и позволяет делать всякие интересные декоративные эффекты. В примере 3 показано создание всплывающей подсказки.
Пример 3. Создание всплывающей подсказки
Текст самой подсказки мы пишем в пользовательском атрибуте data-tooltip и выводим его с помощью свойства content со значением attr(data-tooltip). Остальной код CSS используется для оформления этого текста (рис. 4).
Рис. 4. Вид всплывающей подсказки
См. также
- content
- position
- position в CSS
- quotes
- Абсолютное позиционирование
- Аккордеон меню
- Добавление тени
- Использование в вёрстке
- Липкое позиционирование
- Не только текст
- Нормальное позиционирование
- Относительное позиционирование
- Очистка float
- Подробнее о позиционировании
- Поток
- Псевдоэлемент ::after
- Псевдоэлемент ::before
- Псевдоэлементы
- Псевдоэлементы ::after и ::before
- Свойства позиционирования
- Спойлер
- Фиксированное позиционирование
Создайте веб-страницу, показанную на рис. 1. Вид в браузере IE может несколько отличаться.
Рис. 1
Файлы
Создайте веб-страницу, показанную на рис. 1. Поверх фотографии в правом нижнем углу выводится картинка с полупрозрачным фоном (прозрачность 50%).
Рис. 1