CSS Positioning 101: Fixed, Sticky, and Absolute Made Simple”

In CSS, positioning controls where elements appear on the page—and how they behave when users scroll. But values like fixed, sticky, and absolute can feel a little abstract until you see how they actually work.

Let’s break each one down and compare them in plain terms.

Fixed Positioning

An element with position: fixed is pinned to the browser window—it always stays in view, no matter how much the user scrolls.

Here, position: fixed; fixes a header to the top-left corner of the viewport, making it stay visible at the top of the page as the user scrolls.

(click on the image to open in a new tab)

This is perfect for things like sticky navigation bars or floating action buttons.

NOTE: a fixed element is removed from the normal flow—it won’t leave space behind, and it won’t respond to the surrounding layout.

Sticky Positioning

Sticky positioning is a hybrid of relative and fixed. An element starts as relative, but once the page scrolls past it, it “sticks” to the defined offset.

Here, header behave normally as the user scrolls—until it reaches the top of the viewport, where it then “sticks” in place. It remains fixed until its containing block scrolls out of view.

(click on the image to open in a new tab)

It scrolls with the page—until it hits the top: 0 point—then it holds position. Once its parent scrolls out of view, it scrolls away too.

NOTE: It is best used inside scrollable containers or long documents where you want headings or elements to stay visible for a bit.

Absolute Positioning

Absolute positioning removes the element from the normal document flow and places it relative to the nearest positioned ancestor (an element with position: relative, absolute, or fixed).

This CSS rule positions a tooltip directly below its nearest positioned ancestor. Using top: 100% places it just under the parent element, while left: 0 aligns it to the left edge.

(click on the image to open in a new tab)

If no parent is positioned, it falls back to the body. It works well for overlays, dropdowns, and tooltips, but it is easy to misuse if you don’t keep track of parent contexts.

Below is a table making these three position value differences more clear:

Position Type	Scrolls with Page	Stays in Layout Flow	Positioned Relative To
Fixed	❌ No	❌ No	Viewport
Sticky	✅ Yes (then sticks)	✅ Yes (until it sticks)	Scroll container
Absolute	❌ No	❌ No	Nearest positioned ancestor

Final Thought

Fixed, sticky, and absolute each serve different layout needs. With these three, you’ve got powerful tools for building clean, responsive, and interactive layouts.

Although my blog doesn’t support comments, feel free to reply via email or X.