Question 1

What is the difference between absolute and relative positioning?

Accepted Answer

position: relative keeps the element in the document flow but allows nudging with top/right/bottom/left. position: absolute removes the element from flow and positions it relative to its nearest positioned ancestor. If no ancestor is positioned, it's relative to the document.

Question 2

How does position: sticky work?

Accepted Answer

A sticky element behaves like relative until it reaches a threshold (e.g., top: 0) while scrolling, then acts like fixed until the parent scrolls out of view. It's used for sticky headers within sections. It requires the parent to have overflow: visible and enough height to scroll past.

Question 3

What is position: fixed and when should I use it?

Accepted Answer

position: fixed removes the element from document flow and positions it relative to the viewport — it stays in place while scrolling. Use it for fixed navigation bars, floating action buttons, chat widgets, and cookie banners. Be cautious on mobile: fixed elements can overlap with virtual keyboards.

CSS Position Generator

Offsets

How relative works

Related Tools