Коротко: положение элемента задаёт свойство position со значениями static, relative, absolute, fixed и sticky. Сдвиг указывают через top, right, bottom, left, а порядок наложения — через z-index.
Значения position
| Значение | Поведение |
|---|---|
static |
обычный поток, сдвиги не работают |
relative |
сдвиг от своего места, остаётся в потоке |
absolute |
выходит из потока, позиция от родителя |
fixed |
привязан к окну, не двигается при прокрутке |
sticky |
прилипает при достижении края |
Relative и absolute
Частая связка: родителю задают relative, а дочернему — absolute. Тогда координаты дочернего считаются от родителя, а не от страницы.
.card { position: relative; }
.card .badge {
position: absolute;
top: 8px;
right: 8px;
}Если у родителя нет position, абсолютный элемент уйдёт к ближайшему позиционированному предку или к странице — частая причина «слетевших» элементов.
Вкладки: примеры
.top-btn {
position: fixed;
right: 24px;
bottom: 24px;
}Кнопка «наверх», прикреплённая к окну. Она не участвует в потоке, поэтому может перекрыть контент — учитывайте это.
.thead {
position: sticky;
top: 0;
background: #fff;
}«Липкая» шапка таблицы или заголовок раздела. Прилипает, когда доходит до верхнего края, и остаётся видимой при прокрутке.
.modal { position: fixed; z-index: 1000; }
.modal__close { position: absolute; z-index: 1; }z-index управляет порядком слоёв и работает только у позиционированных элементов. Большее число — ближе к пользователю.
z-index не сработает, если у элемента position: static (по умолчанию). Сначала задайте позиционирование, потом управляйте слоями. И помните: z-index работает в пределах родительского стека.Практика: расположить элемент
- Определите, должен ли элемент оставаться в потоке.
- В потоке —
relative, вне потока —absoluteилиfixed. - Позиционированному родителю задайте
position: relative. - Укажите сдвиг через
top,leftи другие. - Задайте
z-index, если элементы перекрываются. - Проверьте поведение при прокрутке и на мобильном.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Абсолютный элемент улетел в угол страницы | у родителя нет position |
position: relative родителю |
| Сдвиги не работают | position: static |
задать другое значение |
z-index не помогает |
элемент не позиционирован | добавить позиционирование |
| Sticky не прилипает | не задан top |
добавить координату |
| Контент перекрыт | fixed без отступа |
добавить отступ контенту |
Проверьте себя
z-index заработал?
Вопросы и ответы
absolute позиционируется относительно родителя и прокручивается вместе со страницей, а fixed привязан к окну браузера и остаётся на месте при прокрутке.
Это область, внутри которой сравниваются z-index. Если родитель создал свой контекст, дочерний элемент не «перепрыгнет» через элементы вне этого родителя, каким бы большим ни был z-index.
Иногда да — через flex или grid. Но для наложения значков, подсказок и слоёв абсолютное позиционирование остаётся самым удобным.
Причины две: не задана координата top и у родителя стоит overflow: hidden. Уберите ограничение и добавьте координату.
Итоги
positionзадаёт способ позиционирования элемента.- Для
absoluteнужен позиционированный родитель. fixedпривязан к окну,stickyприлипает при прокрутке.z-indexработает только у позиционированных элементов.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.