CSS Position

Flow lessons told boxes how to join a line. position answers a different question: where does this box sit relative to its normal place, its ancestor, or the screen? Master the five everyday values before reaching for stacking or float tricks.

A position toolkit

📊 Position at a glance

Value	Everyday job
`static`	Default — offsets like top/left do nothing useful
`relative`	Nudges from its normal spot; still keeps its space; can anchor absolute children
`absolute`	Removed from normal flow; placed against the nearest positioned ancestor
`fixed`	Removed from flow; pinned to the viewport while you scroll
`sticky`	Acts relative until a scroll threshold, then sticks within its container

Offsets top, right, bottom, and left only matter once position is not static. Pick the mode first, then fine-tune the offset.

Relative — a polite nudge

relative keeps the element in flow. The original space stays reserved. Small offsets are perfect for optical tweaks — and for marking a parent that absolute children should obey.

Relative nudge

css

.card {
position: relative;
top: 0.25rem;
left: 0.25rem;
padding: 1rem;
border: 1px solid #ddd;
}

Absolute — leave the flow

absolute pulls the box out of normal flow. Neighbors close the gap. Placement uses the nearest ancestor with position other than static — often a relative parent. Without that anchor, the element may climb to a larger containing block.

Absolute badge

css

.badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
padding: 0.2rem 0.45rem;
font-size: 0.75rem;
background: #0b5fff;
color: #fff;
border-radius: 0.25rem;
}

Give absolute a home

Pair absolute children with an intentional parent. Name the relationship with classes so the layout stays readable.

Positioned parent

css

.media {
position: relative;
padding: 1rem;
border: 1px solid #e5e5e5;
}

.media .badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
}

Fixed — stick to the viewport

fixed pins the element to the screen. Scrolling the page does not move it. Use it for calm notices or toolbars — not as a shortcut for every column layout.

Fixed notice

css

.notice {
position: fixed;
bottom: 1rem;
right: 1rem;
padding: 0.75rem 1rem;
background: #111;
color: #fff;
border-radius: 0.5rem;
}

Sticky — relative, then stuck

sticky stays in flow until you scroll past a threshold (top is common), then sticks inside its scrolling ancestor. It needs room to scroll and a sensible parent — otherwise it feels broken.

Sticky section label

css

.section-label {
position: sticky;
top: 0;
padding: 0.5rem 0;
background: #fff;
border-bottom: 1px solid #eee;
}

A calm position habit

Use relative for small nudges and absolute anchors. Use absolute for badges and overlays inside a known parent. Reserve fixed and sticky for intentional chrome. Leave z-index stacking and float clearing for their own lessons.

Named position roles

css

.panel {
position: relative;
}

.panel__tag {
position: absolute;
top: 0;
left: 0;
}

Try it yourself

Nudge a .card with position: relative and tiny top / left values.
Place a .badge with absolute inside a relative .media parent.
Add a small fixed notice in a corner — scroll and watch it stay.
Try a sticky label with top: 0 in a tall scrollable section.
Write one sentence: when is absolute safer than fixed?

Common mistakes

Using absolute without a positioned parent and wondering why it jumps far away
Reaching for fixed to solve ordinary page layout
Expecting sticky to work with no scroll overflow or conflicting ancestors
Treating this lesson like the inline-block row lesson (different job)
Dumping z-index or float recipes here instead of learning placement modes

Summary

position controls placement relative to flow, ancestors, or the viewport
relative nudges and anchors; absolute leaves flow inside that anchor
fixed pins to the viewport; sticky mixes relative and stuck behavior
Offsets matter only when position is not static
Keep stacking and float tools for later — master the five modes first

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓

Questions

🎯

70%

To Pass

♾️

∞

Time

🔄

∞

Attempts

📝 Instructions

Read each question carefully
Select the best answer for each question
You can retake the quiz as many times as you want
Your progress will be shown at the top

Language