19.01.2022

Использование position:sticky в CSS

Внедрение position:sticky в CSS

От создателя: вы когда-нибудь сталкивались со случаем, когда position:sticky не работает подабающим образом с дочерним элементом контейнера? Несколько дней обратно я помогал другу решить именно эту делему и хочу наконец написать об этом.

На самом деле эта неувязка не в чем-то глючном или неверном. Фактически, это эффект поведения CSS по умолчанию. Почему и как? Поглядим на следующий пример.

CSS

У нас есть сетка с контейнером внутни шириной 250px, а остальное доступное место предназначено для основной секции. Все просто, правда?

Внедрение position:sticky в CSS

Сейчас мы хотим добавить position:sticky к элементу aside, чтоб зафиксировать его при прокрутке.

CSS

Ой. Это не работает? Почему? Давайте разберемся.

Поведение частей по умолчанию при align-items

Добавление фона к элементу aside покажет, что его высота равна высоте основной части.

Внедрение position:sticky в CSS

По умолчанию свойство align-items равно stretch. В итоге столбец растянется по высоте, чтобы соответствовать самому большенному столбцу в сетке.

Позвольте мне показать вам еще один пример, который поможет лучше проиллюстрировать делему. У нас есть простой контейнер-сетка.

Внедрение position:sticky в CSS

CSS

По умолчанию карты растягиваются, чтоб соответствовать самой большой карте (первая справа). Чтоб переопределить это поведение, нам нужно поменять значение align-items установив ему значение start.

CSS

Внедрение position:sticky в CSS

Вернемся к начальному примеру. Чтобы показать проблему, я добавил фон в раздел aside. Попытайтесь использовать checkbox в следующей демонстрации и обратите внимание, как меняется высота боковой панели.

Нам необходимо переопределить поведение по умолчанию для параметра stretch; и сделать высоту карты равной содержимому. Мы можем использовать align-self для элемента aside:

CSS

Либо использовать align-items для родительского элемента, что воздействует на все дочерние элементы.

CSS

Выбор меж ними зависит от вашего варианта использования. У вас может быть более 2-ух столбцов, и вы хотите выровнять только один из их.

Другой пример

Очень схожий пример, который может иметь такое же поведение по умолчанию для сетки CSS, — это страничка списка команды.

Внедрение position:sticky в CSS

При прокрутке мы желаем, чтобы «Дизайн» оставался неизменным. Без использования align-self: start страничка не будет отображаться должным образом.

CSS

Заключение

В этой статье я привел пример функции CSS, от которой мы, разработчики, можем получить преимущество в неких случаях и переопределить другое значение.

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *