Урок 18. Справочник: Позиционирование: static, relative, absolute, fixed, sticky
⚡ Кратко
Смотрите не только на запись свойства, но и на то, как оно влияет на поток и точку отсчёта. Запомните пару «position: relative родителю → position: absolute потомку».
Ключевые конструкции
| Конструкция | Назначение | В потоке? |
|---|---|---|
position: static | Обычное положение в потоке (по умолчанию). top/left не действуют. | ✅ да |
position: relative | Смещение от собственного места без удаления из потока. | ✅ да |
position: absolute | Позиционирование относительно ближайшего positioned-предка. | ❌ нет |
position: fixed | Позиционирование относительно окна браузера. | ❌ нет |
position: sticky | Липкое поведение при прокрутке (нужен порог top/bottom). | гибрид |
top / right / bottom / left | Смещения для позиционированных элементов. | — |
inset: 0 | Короткая запись для top/right/bottom/left сразу. | — |
z-index | Порядок наложения позиционированных элементов. | — |
Базовый шаблон «значок в углу карточки»
Самая частая комбинация — relative-родитель и absolute-потомок:
−30%
Карточка со скидкой
.card { position: relative; }
.label {
position: absolute;
top: 8px;
right: 8px;
}Свойства
top/right/bottom/left работают только если position ≠ static. На static-элементе они молча игнорируются.