Как сделать - Липкое изображение
Узнать, как создать липкое изображение с помощью CSS.
Липкое изображение
Примечание: Этот пример не работает в Internet Explorer или Edge 15 и более ранних версиях.
Создать липкое изображение
Элемент с position: sticky;
позиционируется в зависимости от положения прокрутки пользователя.
Липкий элемент переключается между relative
и fixed
, в зависимости от положения прокрутки. Он позиционируется относительно до тех пор, пока заданное положение смещения не будет выполнено в окне просмотра - тогда оно "прилипает" на месте (например, position:fixed).
Примечание: Internet Explorer, Edge 15 и более ранние версии не поддерживают липкое позиционирование. Для Safari требуется префикс -webkit- (см. пример ниже). Также необходимо указать хотя бы один из следующих параметров top
, right
, bottom
или left
для липкого позиционирования, чтобы работать.
Чтобы узнать больше о позиционировании CSS, прочитайте наш учебник CSS Позиция.
Чтобы узнать больше о том, как стилизовать изображения, прочитайте наш учебник CSS Изображения.