Flash cards
Review the key moves
What is the main idea behind CSS Sticky Positioning?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___.sticky {Put the learning moves in the order that makes the concept easiest to apply.
CSS position: sticky
An element with position: sticky; toggles between a relative and fixed position, depending on the scroll position.
A sticky element is positioned relative until a certain scroll position is reached - then it "sticks" in that place (like position:fixed).
Note
You must specify at least one of the top , right , bottom or left properties, for sticky positioning to work.
In this example, when the sticky element reach the top of the page (top: 0), it sticks to this position:
Example
div.sticky {
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}Live preview
Common Uses for Sticky Positioning
Sticky positioning is commonly used for
- Sticky headers - Navigation bars that stick to the top when scrolling
- Sticky sidebars - Side content that stays visible while scrolling main content
- Sticky table headers - Table headers that remain visible when scrolling long tables
Sticky vs. Fixed
The key differences between sticky and fixed positioning:
| Feature | position: sticky | position: fixed |
|---|---|---|
| Initial behavior | Acts like relative | Always fixed to viewport |
| Space in document | Takes up space initially | Does not take up space |
| Scroll behavior | Sticks after threshold | Always fixed |
| Container bound | Yes, respects parent boundaries | No, always relative to viewport |
All CSS Positioning Properties
| Property | Description |
|---|---|
| bottom | Sets the bottom margin edge for a positioned box |
| clip | Clips an absolutely positioned element |
| left | Sets the left margin edge for a positioned box |
| position | Specifies the type of positioning for an element |
| right | Sets the right margin edge for a positioned box |
| top | Sets the top margin edge for a positioned box |