Positioning Schemes

Break elements out of the normal document flow to create overlays, sticky headers, and fixed floating buttons.

CSS6 min readConcept 16 of 43

What it is

By default, browsers place HTML elements onto the page one after another, from top to bottom. This is called the 'normal document flow'.

The position property allows you to hijack this behavior. You can nudge an element away from its original spot, remove it from the flow entirely so other elements ignore it, or lock it to the screen so it never scrolls away.

Why it matters

Complex UI patterns are impossible with normal flow alone. If you want a navigation bar that stays visible as the user scrolls, a modal dialog that hovers over the page, or a notification badge that sits exactly on the top-right corner of an icon, you must use CSS positioning.

How it works

There are five main values for the position property:

1. **static**: The default. The element stays in normal flow. The top, right, bottom, and left properties have absolutely no effect.

2. **relative**: Stays in normal flow, but you can visually nudge it using top/left. Importantly, it acts as an 'anchor' for any absolutely positioned children inside it.

3. **absolute**: Completely removed from the normal flow. It positions itself relative to its closest *positioned* ancestor (any parent that isn't static).

4. **fixed**: Removed from the flow and locked to the browser viewport. It stays on screen even when the user scrolls.

5. **sticky**: A hybrid. It acts like static (scrolling normally) until it hits a specified threshold (like top: 0), at which point it 'sticks' to the screen until its parent container scrolls away.

Try it

Select different positioning schemes for the highlighted box. Use the scroll area to see how 'fixed' and 'sticky' behave when the page moves.

The Position Inspector

Position Scheme

Default document flow.

/* 1. The anchor */
.parent {
position: relative;
}
 
/* 2. The target element */
.target {
position: static;
top: 10px;
left: 10px;
}
Scroll down viewport ↓
.parent (relative)
.target
Normal Flow Sibling
iWhen you select absolute or fixed, the target box is ripped from the flow, causing the sibling to jump up.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1Which position value completely removes an element from the normal document flow and locks it to the browser viewport, so it never scrolls?
  2. 2If a child element is set to 'position: absolute; top: 0;', what determines which ancestor it anchors to?
  3. 3Which position value behaves like 'static' until the user scrolls past a threshold, at which point it temporarily acts like 'fixed'?

Remember this

  • static is the default. top and left do nothing.
  • relative keeps the element in flow but allows nudging, and acts as an anchor for absolute children.
  • absolute removes the element from flow and anchors it to the nearest positioned parent.
  • fixed locks the element to the browser screen.
  • sticky scrolls normally until a threshold, then sticks to the screen.

Done with this concept?

Mark it complete to track your progress. No login needed.