Статическое и относительное позиционирование
Разберитесь в стандартном статическом положении и в том, как relative перемещает элементы относительно их обычного места.
«Статическое и относительное позиционирование» — бесплатный урок CSS Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Свойство position
Свойство position управляет размещением элемента в потоке документа. Существует пять значений: static, relative, absolute, fixed и sticky.
position: static (по умолчанию)
Для каждого элемента по умолчанию задано position: static. Статические элементы следуют обычному потоку документа: блочные элементы располагаются вертикально друг за другом, а встроенные элементы — слева направо. Свойства смещения (top, right, bottom, left) не оказывают эффекта.
position: relative
position: relative оставляет элемент в обычном потоке, но позволяет сместить его относительно его собственного обычного положения с помощью top, right, bottom, left.
<div class="shifted">Shifted 10px down, 20px right — original space still reserved.</div>
Главное: пространство сохраняется
При использовании position: relative со смещениями элемент визуально перемещается, но его исходное пространство в раскладке всё ещё резервируется. Другие элементы не занимают образовавшийся пробел.
Top, Right, Bottom, Left
Свойства смещения перемещают элемент относительно опорной точки:
top: перемещает вниз от верхнего краяleft: перемещает вправо от левого края- Отрицательные значения меняют направление на противоположное
<span class="badge">NEW</span>
z-index требует position
z-index работает только для позиционированных элементов (не для static). Если Вам нужно управлять порядком слоёв, задайте как минимум position: relative.
<div class="tooltip">Tooltip (relative + z-index)</div>
Relative как содержащий блок
Самое важное применение position: relative — превращение элемента в содержащий блок для абсолютно позиционированных дочерних элементов, даже без задания смещений.
<div class="card">Card content<span class="card__badge">Badge</span></div>
Сочетание relative и transform
Сочетание position: relative с transform создаёт новый контекст наложения. Элемент остаётся в потоке, но может быть визуально преобразован.
<div class="hover-lift demo-hover">Hover me — I lift up</div>
Когда NOT следует использовать relative
Не задавайте position: relative каждому элементу подряд. Это создаёт контексты наложения, которые могут усложнить управление z-index. Используйте relative только при необходимости задать смещения или закрепить абсолютно позиционированные дочерние элементы.
Сочетание с переходами
Поскольку относительное позиционирование не влияет на поток раскладки, Вы можете безопасно анимировать top/left для создания визуальных эффектов, хотя анимация transform: translate() более производительна.
<div class="shake demo-hover">Hover me — I shake</div>
Отладка проблем позиционирования
В DevTools откройте панель Вычисленные, чтобы увидеть фактическое значение position. Схема блочной модели показывает точные применённые координаты смещения.
Быстрая проверка
Что происходит с пространством элемента в раскладке при применении position: relative; top: 20px?
Итоги
position: static используется по умолчанию: без смещений и без наложения. position: relative позволяет смещать элемент относительно его собственного положения и сохраняет занимаемое им пространство в раскладке. Его главная роль — быть содержащим блоком для абсолютно позиционированных дочерних элементов.
Часто задаваемые вопросы
Урок «Статическое и относительное позиционирование» бесплатный?
Да — полный текст урока «Статическое и относительное позиционирование» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Статическое и относительное позиционирование»?
Разберитесь в стандартном статическом положении и в том, как relative перемещает элементы относительно их обычного места. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Статическое и относительное позиционирование»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Статическое и относительное позиционирование
- Абсолютное позиционирование и содержащий блок
- Фиксированное и липкое позиционирование
- Z-index и контекст наложения