Фиксированное и липкое позиционирование
Фиксируйте элементы относительно области просмотра или создавайте прилипающие при прокрутке заголовки и боковые панели.
«Фиксированное и липкое позиционирование» — бесплатный урок CSS Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
position: fixed
Фиксированный элемент позиционируется относительно области просмотра браузера и остаётся на месте даже при прокрутке страницы. Он также удаляется из потока документа.
<div class="sticky-nav">Fixed navigation bar</div>
<p>Scroll content below the fixed nav...</p>
Случаи использования фиксированного позиционирования
Распространённые варианты использования position: fixed:
- Панели навигации, остающиеся вверху
- Плавающие кнопки действий (FAB)
- Виджеты чата внизу справа
- Баннеры согласия на использование файлов cookie
- Модальные наложения
Компенсация фиксированных заголовков
Фиксированные заголовки перекрывают расположенное ниже содержимое. Добавьте верхний внутренний или внешний отступ, равный высоте заголовка, чтобы сдвинуть содержимое вниз:
<div class="nav">Fixed Header (64px)</div>
<p>Page content starts safely below the header thanks to padding-top.</p>
Преобразование родительских элементов и fixed
Важная особенность: если к родительскому элементу применено CSS-свойство transform, perspective или filter, фиксированное позиционирование становится относительным к этому родителю, а не к области просмотра. Это распространённая ошибка.
position: sticky
position: sticky — это гибридный режим: элемент прокручивается обычным образом, пока не достигнет заданного порога (например, top: 0), а затем прилипает к месту внутри родительского контейнера.
<div class="table-header"><table><thead><tr><th>Name</th><th>Score</th></tr></thead><tbody><tr><td>Row 1</td><td>10</td></tr><tr><td>Row 2</td><td>20</td></tr><tr><td>Row 3</td><td>30</td></tr><tr><td>Row 4</td><td>40</td></tr><tr><td>Row 5</td><td>50</td></tr></tbody></table></div>
Для sticky нужен прокручиваемый родитель
Липкий элемент фиксируется внутри содержащего блока. Если родитель недостаточно высок для прокрутки, sticky не действует. Для родителя не должно быть задано overflow со значением hidden.
Top, Right, Bottom, Left для sticky
Чтобы sticky активировался, необходимо определить хотя бы одно смещение. Распространённые шаблоны:
<div class="header">Sticky Header</div>
<div class="sidebar">Sticky Sidebar</div>
<div class="footer">Sticky Footer</div>
Липкие заголовки таблиц
Sticky идеально подходит для заголовков таблиц в прокручиваемых оболочках: заголовок остаётся видимым, пока пользователь прокручивает строки.
<div class="table-wrapper"><table><thead><tr><th>Product</th><th>Price</th></tr></thead><tbody><tr><td>Apple</td><td>$1</td></tr><tr><td>Bread</td><td>$3</td></tr><tr><td>Milk</td><td>$2</td></tr><tr><td>Eggs</td><td>$4</td></tr><tr><td>Cheese</td><td>$5</td></tr></tbody></table></div>
Шаблон липкой боковой панели
Классическая липкая боковая панель, остающаяся в поле зрения во время прокрутки основного содержимого:
<div class="layout"><div class="sidebar">Sticky sidebar content</div><div class="main">Main scrolling content area with lots of text to scroll through.</div></div>
Сравнение fixed и sticky
Основные различия:
- Fixed: всегда определяется относительно области просмотра, всегда находится вне потока
- Sticky: прокручивается вместе с содержимым до достижения порога, остаётся в потоке и останавливается на границе родительского элемента
Производительность: fixed и слои
Фиксированные элементы создают новый контекст наложения и при прокрутке могут запускать перераскладку, если перекрывают области перерисовки. Делайте фиксированные элементы простыми и избегайте затратных свойств, например box-shadow, для них.
Быстрая проверка
Какое ограничение есть у position: sticky, но нет у position: fixed?
Итоги
position: fixed привязывает элементы к области просмотра, что удобно для липкой навигации и наложений. position: sticky сначала прокручивается обычным образом, а затем фиксируется при достижении порога — идеально для заголовков таблиц и боковых панелей. Для активации фиксации обоим режимам требуется хотя бы одно свойство смещения.
Часто задаваемые вопросы
Урок «Фиксированное и липкое позиционирование» бесплатный?
Да — полный текст урока «Фиксированное и липкое позиционирование» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Фиксированное и липкое позиционирование»?
Фиксируйте элементы относительно области просмотра или создавайте прилипающие при прокрутке заголовки и боковые панели. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Фиксированное и липкое позиционирование»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Статическое и относительное позиционирование
- Абсолютное позиционирование и содержащий блок
- Фиксированное и липкое позиционирование
- Z-index и контекст наложения