Sticky positioning is a mix of relative and fixed positioning.
An element behaves like a normal element at first, but when you scroll and reach a certain point, it becomes fixed on the screen.
This is commonly used for navigation bars, section headers, and side menus.
In this example, the header scrolls normally at first.
When it reaches the top of the screen, it sticks there and stays visible while the rest of the page scrolls.
Sticky sidebars are often used in blogs, documentation sites, and dashboards.
They keep important navigation visible while the user scrolls through long content.
This pattern is useful when you want headings to stay visible while scrolling inside large sections.
Important rules of sticky positioning
- The element must have a top, left, right, or bottom value
- It works only when the parent container has enough height
- It does not work if overflow is hidden on the parent
When should you use sticky positioning?
Use it when:
- You want elements to stick only after scrolling
- You need navigation to stay visible
- You want a smooth scroll experience without fixed layout all the time
Practice task
Create a sticky header:
- Set position to sticky
- Set top to 0
- Add background color
- Scroll the page and test the behavior
Next lesson
In the next page, you will build a real layout using display and positioning together.