Позиционирование элементов CSS: absolute и прокрутка

Быстрый ответ

Для того чтобы элемент не менял своего положения при прокрутке страницы, задайте родительскому блоку свойство position: relative;, а самому элементу установите position: absolute;. Это позволит элементу сохранять текущую позицию внутри родительского контейнера при скроллинге.

CSS:

.container {
  position: relative;
  overflow: auto;
}
.child {
  position: absolute;
  bottom: 0;
  right: 0;
}

HTML:

<div class="container">
  <div class="full-height">
    Прокручиваемое содержимое...
    <div class="child">🎵Танцую на дне вместе с тобой...🎵</div>
  </div>
</div>

При прокрутке контента элемент с классом .child остаётся на месте, словно он прикреплён к нижнему краю внутреннего контейнера с классом .full-height.

Совместимость с position: relative

Если вам требуется, чтобы абсолютно позиционированный элемент прикрепился к определённому месту и не перемещался при прокрутке, оберните его в родительский div, в котором задано position: relative;. Это замкнёт область перемещения абсолютно позиционированного элемента.

Настройка высоты

Желаете прикрепить элемент к нижней части контейнера? Примените к классу .full-height свойство height: 100%; – это позволит использовать значение bottom как указатель на истинное "Низ" родительского элемента.

Z-index: слой за слоем

Если ваш элемент оказался скрыт под другими, воспользуйтесь свойством z-index для обеспечения его видимости при наложении элементов внутри контейнера.

Ещё один вариант: position: fixed

Может быть, хотите, чтобы элемент оставался неподвижным при любой прокрутке? В этом случае ваш выбор – position: fixed; Этот вариант зафиксирует элемент относительно окна просмотра, не привязывая его к родительским контейнерам.

Визуализация

Воспроизведём процесс, используя театральную метафору:

Декорации (🎭): [Задник, Реквизит, Главная роль, Второстепенный персонаж]

Свойство position: absolute;, олицетворяет прожектор, фокусирующийся на главной роли:

🎭: [Задник, Реквизит, ✨Главная роль, Второстепенный персонаж]

Добавляем прокрутку:

До прокрутки:     🔦✨ Главная роль в свете фонаря
Во время прокрутки:🔦✨ Главная роль движется вместе с фонарем
После прокрутки:  🔦✨ Главная роль продолжает оставаться в свете фонаря, независимо от того, куда ушли остальные

Как звезда остаётся в центре внимания, так и наш «Прожектор» удерживает абсолютно позиционированный элемент в свете, не позволяя ему скользнуть в тень.

Тонкая настройка и управление переполнением

Точное позиционирование: Используйте свойства top, right, bottom и left для прецизионного размещения абсолютно позиционированного элемента внутри его контейнера.

Учёт объёма содержимого: Разный объём содержимого может влиять на поведение абсолютного элемента, так что учитывайте этот аспект, прежде чем отправлять его пользователю.

Стратегии работы с переполнением: Можно скрыть излишнее содержимое, задав overflow: hidden;, но лучше использовать overflow: auto; или overflow: scroll; для предоставления контроля над прокруткой пользователю, при этом сохраняя фиксированное положение элементов.

Веб-решения на основе CSS: Старайтесь применять только CSS-методы для сохранения позиции элемента при прокрутке, избегая использование JavaScript там, где это возможно.

Вложенная прокрутка: Если ваш макет предусматривает вложенную прокрутку, установка overflow: scroll; для вложенных контейнеров внутри родительского может эффективно справиться с задачей, сохраняя абсолютные позиции элеменов без изменений.

Полезные материалы

1. position – CSS: Каскадные таблицы стилей | MDN — Глубокое погружение в понимание position в CSS.
2. position: sticky; | CSS-Tricks — Обстоятельный разбор использования свойства position со значением sticky.
3. position | CSS-Tricks — Исчерпывающее руководство по различным способам использования свойства position в CSS.
4. Создание модального окна с помощью CSS и JavaScript — Практическое применение position: absolute при создании модальных окон.
5. CSS Position – Изучение за 9 минут – YouTube — Краткий видеоурок об использовании позиционирования в CSS.