День 10 | Позиционирование элементов
50 минПозиционирование элементов
Свойство position определяет, как элемент позиционируется на странице. Это очень важная тема для создания сложных макетов.
position: static (по умолчанию)
Это значение по умолчанию. Элемент располагается в обычном потоке документа. Свойства top, right, bottom, left и z-index не работают.
.element {
position: static; /* Можно не указывать, это по умолчанию */
}position: relative
Элемент позиционируется относительно своего обычного положения. Можно сдвинуть элемент с помощью top, right, bottom, left.
Важно: Элемент сдвигается, но место, которое он занимал, остаётся пустым. Другие элементы не "подтягиваются".
position: absolute
Элемент позиционируется относительно ближайшего родителя с position: relative (или absolute, fixed). Если такого родителя нет — относительно <body>.
Элемент выходит из потока документа — другие элементы ведут себя, как будто его нет.
Когда использовать:
- Всплывающие подсказки
- Иконки на элементах
- Overlay (затемняющий слой)
- Сложные макеты
position: fixed
Элемент позиционируется относительно окна браузера (viewport). При скролле остаётся на месте.
Когда использовать:
- Фиксированная навигация (sticky header)
- Кнопка "Наверх"
- Модальные окна
- Боковые панели
position: sticky
Гибрид между relative и fixed. Элемент ведёт себя как relative, пока не достигнет указанной позиции, затем "прилипает" как fixed.
Когда использовать:
- Липкая навигация (sticky header)
- Заголовки таблиц при скролле
- Боковые меню
z-index (порядок наложения)
z-index определяет порядок наложения элементов друг на друга. Работает только с элементами, у которых position не static.
Чем больше значение, тем выше элемент:
.element1 {
position: relative;
z-index: 1;
}
.element2 {
position: relative;
z-index: 10; /* Будет поверх element1 */
}
.element3 {
position: relative;
z-index: 100; /* Будет поверх всех */
}Практические примеры
Пример 1: Overlay (затемняющий слой)
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
.modal-content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1001;
}Пример 2: Иконка на элементе
.badge {
position: relative;
}
.badge::after {
content: "NEW";
position: absolute;
top: -10px;
right: -10px;
background: red;
color: white;
padding: 5px 10px;
border-radius: 12px;
font-size: 12px;
}Практическое задание
- Создайте sticky header (липкую шапку)
- Создайте модальное окно с overlay
- Добавьте иконку "NEW" на карточку с помощью absolute
- Поэкспериментируйте с z-index
- Создайте кнопку "Наверх" с position: fixed
Что дальше?
Отлично! Теперь вы знаете позиционирование. В следующем уроке мы начнём верстать реальные блоки, используя изученные техники.