Positioning and stacking
Pin badges, keep toolbars visible and control which layer wins.
What you will be able to do
- Choose between relative, absolute and fixed
- Anchor children to a parent
- Reason about z-index
Normal flow stacks elements in document order. Positioning takes an element out of that flow and anchors it to a containing block.
.card {
position: relative;
}
.badge {
position: absolute;
top: 12px;
right: 12px;
}
.toolbar {
position: sticky;
top: 0;
z-index: 10;
}
.modal {
position: fixed;
inset: 0;
z-index: 100;
}| Value | Behaviour |
|---|---|
| static | Normal flow; offsets are ignored |
| relative | Keeps its space, then offsets visually |
| absolute | Removed from flow, anchored to the nearest positioned ancestor |
| fixed | Anchored to the viewport |
| sticky | Relative until a scroll threshold, then fixed |
Your turn
EasyPin a badge to the card corner
Place the badge in the top-right corner of the card without affecting the text flow.
CSS · starter
.card {
/* your rules here */
}Check your understanding before moving on.
Knowledge checkQuestion 1
Which position anchors an element to the viewport?
Select an answer to continue
Study tools
Make it yours.
Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.
Sign in to save notes and flashcards.Both are private to your account and stay with your progress.
Sign inFinished reading?
Lock in what you just learned.
0%
Mark this lesson complete to save your place and move one step closer to the certificate.