ImagesLesson 89Free preview

Sticky Image

This lesson is part of How To · All levels

Summary

Sticky image keeps the image visible on the screen when the text next to it is flipped. This pattern is suitable for product pages or articles with supporting images.

Key points

Position: sticky makes the element stick after reaching a certain offset.
Top determines the distance of the element from the top edge of the viewport when attached.
The mother must be high enough for the sticky effect to have moving space.
Self-align: flex-start prevents the flex item from stretching as high as the parent.
On a small screen, the sticky is often turned off so as not to interfere with the reading space.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.