Загрузка...

Position в CSS

Уроки потока учили блоки, как вставать в строку. position отвечает на другой вопрос: где этот блок сидит относительно обычного места, предка или экрана? Освойте пять повседневных значений, прежде чем браться за stacking или float.

Набор инструментов position

📊 Position одним взглядом

Значение Повседневная роль
static По умолчанию — смещения вроде top/left почти бесполезны
relative Сдвигается с обычного места; сохраняет пространство; может якорить absolute-детей
absolute Вне обычного потока; размещается относительно ближайшего позиционированного предка
fixed Вне потока; прикреплён к viewport при прокрутке
sticky Ведёт себя как relative до порога прокрутки, затем липнет внутри контейнера

Смещения top, right, bottom и left имеют смысл только когда position не static. Сначала выберите режим, потом уточните смещение.

Relative — вежливый сдвиг

relative оставляет элемент в потоке. Исходное место остаётся зарезервированным. Малые смещения хороши для оптической подстройки — и чтобы пометить родителя, которому должны подчиняться absolute-дети.

Сдвиг relative

css 
.card {
position: relative;
top: 0.25rem;
left: 0.25rem;
padding: 1rem;
border: 1px solid #ddd;
}

Absolute — выйти из потока

absolute вытягивает блок из обычного потока. Соседи закрывают щель. Размещение опирается на ближайшего предка с position не static — часто родителя relative. Без этого якоря элемент может подняться к более крупному containing block.

Значок absolute

css 
.badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
padding: 0.2rem 0.45rem;
font-size: 0.75rem;
background: #0b5fff;
color: #fff;
border-radius: 0.25rem;
}

Дайте absolute дом

Связывайте absolute-детей с намеренным родителем. Назовите отношение классами, чтобы вёрстка оставалась читаемой.

Позиционированный родитель

css 
.media {
position: relative;
padding: 1rem;
border: 1px solid #e5e5e5;
}

.media .badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
}

Fixed — прилипнуть к viewport

fixed прикрепляет элемент к экрану. Прокрутка страницы его не сдвигает. Используйте для спокойных уведомлений или панелей — не как ярлык для любой колоночной вёрстки.

Уведомление fixed

css 
.notice {
position: fixed;
bottom: 1rem;
right: 1rem;
padding: 0.75rem 1rem;
background: #111;
color: #fff;
border-radius: 0.5rem;
}

Sticky — сначала relative, потом липкий

sticky остаётся в потоке, пока не пройдёте порог прокрутки (top обычен), затем липнет внутри прокручиваемого предка. Нужно место для скролла и разумный родитель — иначе кажется сломанным.

Метка секции sticky

css 
.section-label {
position: sticky;
top: 0;
padding: 0.5rem 0;
background: #fff;
border-bottom: 1px solid #eee;
}

Спокойная привычка position

Используйте relative для малых сдвигов и якорей absolute. Используйте absolute для значков и наложений внутри известного родителя. Оставьте fixed и sticky для намеренного chrome. Stacking через z-index и очистку float — для отдельных уроков.

Именованные роли position

css 
.panel {
position: relative;
}

.panel__tag {
position: absolute;
top: 0;
left: 0;
}

Попробуйте сами

  1. Сдвиньте .card с position: relative и крошечными top / left.
  2. Поместите .badge с absolute внутри relative-родителя .media.
  3. Добавьте небольшое уведомление fixed в угол — прокрутите и смотрите, как остаётся.
  4. Попробуйте метку sticky с top: 0 в высокой прокручиваемой секции.
  5. Напишите одно предложение: когда absolute безопаснее fixed?

Частые ошибки

  • absolute без позиционированного родителя и удивление, почему улетает далеко
  • Хвататься за fixed, чтобы решить обычную вёрстку страницы
  • Ждать работы sticky без переполнения скроллом или с конфликтующими предками
  • Считать этот урок уроком строк inline-block (другая задача)
  • Сваливать сюда рецепты z-index или float вместо изучения режимов размещения

Итог

  • position управляет размещением относительно потока, предков или viewport
  • relative сдвигает и якорит; absolute выходит из потока внутри этого якоря
  • fixed крепится к viewport; sticky смешивает relative и липкое поведение
  • Смещения важны только когда position не static
  • Stacking и float оставьте на потом — сначала освойте пять режимов

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
7
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 37 из 37
Css Урок