Мы освоили Flexbox для раскладки. Теперь — свойство position, которое позволяет выводить элементы из обычного потока документа и размещать их относительно родителя или окна браузера. Это нужно для фиксированной шапки, всплывающих блоков, наложения элементов.
position: static, relative, absolute, fixed.top, right, bottom, left для смещения.z-index для наложения.sticky для «прилипающей» шапки.position: static (по умолчанию)Элемент участвует в обычном потоке. top, left и т.д. не влияют.
position: relativeЭлемент остаётся в потоке, но можно сместить его относительно собственной исходной позиции:
.box {
position: relative;
top: 10px;
left: 20px;
}Исходное место в потоке сохраняется (другие элементы его «видят»).
position: absoluteЭлемент выходит из потока. Позиционируется относительно ближайшего позиционированного предка (у которого position не static) или относительно <html>.
.parent { position: relative; }
.child {
position: absolute;
top: 0;
right: 0;
}Часто родителю задают position: relative, чтобы «привязать» absolute-элемент.
position: fixedФиксируется относительно окна браузера. При прокрутке остаётся на месте (например, шапка или кнопка «Наверх»).
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
}position: stickyЭлемент ведёт себя как relative до достижения порога прокрутки, затем «прилипает» как fixed.
.header {
position: sticky;
top: 0;
}z-indexУправляет порядком наложения. Большее значение — выше.
.overlay { z-index: 10; }
.modal { z-index: 100; }Работает только у элементов с position не static.
Создай блок с классом badge в правом верхнем углу карточки. Используй absolute и relative.
Сделай фиксированную шапку. Добавь body padding-top, чтобы контент не скрывался под шапкой.
Создай «всплывающую» подсказку: при наведении на ссылку показывается блок с текстом (пока без :hover — просто размести блок absolute относительно ссылки).
Два квадрата накладываются друг на друга. Используй z-index, чтобы один был поверх другого.
Мы изучили позиционирование: relative, absolute, fixed, sticky и z-index. На следующем уроке — псевдоклассы и псевдоэлементы.
position: absolute без position: relative у родителя — элемент будет позиционирован относительно body.fixed «вырывает» элемент из потока.z-index без position — без него свойство не сработает.top/left и margin — при absolute смещение идёт от краёв родителя.Добавь на карточку товара/статьи бейдж «Новое» в правом верхнем углу. Родитель — relative, бейдж — absolute, top/right.
Сделай навигацию с position: fixed и top: 0. Добавь body или main padding-top, чтобы контент не перекрывался. Задай шапке фон и, при необходимости, тень.
Внизу страницы добавь кнопку «Наверх» с position: fixed и bottom: 20px; right: 20px. Пока без скролла — просто визуально. Добавь z-index, чтобы она была поверх контента.
Создай блок с изображением. Поверх изображения — полупрозрачный оверлей (чёрный, opacity: 0.5) и текст по центру. Используй relative/absolute и z-index.
Длинная страница с несколькими разделами. У каждого <h2> задай position: sticky и top: 60px (или высота шапки). При прокрутке заголовки раздела «прилипают» под фиксированной шапкой.
Карточка с декоративным элементом в углу (треугольник или лента) через absolute.
Создай разметку модального окна: полупрозрачный фон на весь экран (fixed), поверх — белый блок по центру. Пока без JavaScript.