CSS Positioning — Demo

This page covers position and related properties: static, relative, absolute, fixed, sticky. Each example shows output and code.

1. position: static (default)

Every element has position: static by default. It stays in normal document flow. top, right, bottom, left, and z-index have no effect.

Output
Box 1 (static)
Box 2 (static)
Code 
.box {
  position: static;  /* default; usually omitted */
}

2. position: relative

The element stays in normal flow, but top, right, bottom, left offset it from its original position. The space it would have taken is still reserved.

Output
Normal
relative + top: 10px, left: 20px
Next box
Code 
.box {
  position: relative;
  top: 10px;
  left: 20px;
}
Explanation: The element is offset from where it would normally be. Other elements don’t move — they still act as if the element is in its original spot. Often used to create a positioning context for position: absolute children, or for small visual tweaks.

3. position: absolute

The element is removed from normal flow. It is positioned relative to its nearest positioned ancestor (one with position other than static). If none exists, it uses the viewport. top, right, bottom, left define its edges.

Output
Parent (position: relative)
absolute; right: 10px; bottom: 10px
Code 
.parent {
  position: relative;
  height: 120px;
}
.child {
  position: absolute;
  right: 10px;
  bottom: 10px;
}
Explanation: The absolute child is positioned relative to the position: relative parent. Without a positioned ancestor, it would use the <html> (viewport). The child no longer affects the layout of siblings. Use for overlays, badges, tooltips, dropdowns.

4. position: fixed

The element is removed from flow and positioned relative to the viewport. It stays in the same place when the user scrolls. Use for fixed headers, footers, or “back to top” buttons.

Output
fixed; bottom: 20px; right: 20px (relative to viewport)

Scroll the page — this box stays fixed at bottom-right of the viewport.

Code 
.fixed-box {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
Explanation: position: fixed ignores all ancestors. The element is always positioned relative to the browser window (viewport). It doesn’t move when you scroll. On mobile, be careful — fixed elements can behave differently when the address bar shows/hides.

5. position: sticky

A hybrid: the element acts like relative until it would scroll out of view, then it “sticks” like fixed until its container scrolls past. Requires top, right, bottom, or left.

Output
sticky; top: 0 — scroll below to see it stick

Line 1

Line 2

Line 3

Line 4

Line 5

Line 6

Code 
.sticky {
  position: sticky;
  top: 0;
}
Explanation: The sticky element scrolls with the page until it reaches top: 0 (or whatever you set). Then it sticks there. When its parent scrolls out of view, the sticky element goes with it. Great for sticky table headers, nav bars, or “sticky” CTAs.

6. z-index — stacking order

When elements overlap (e.g. absolute, fixed), z-index controls which one appears on top. Higher values go on top. Only works on positioned elements (position not static).

Output
z-index: 1
z-index: 3 (on top)
z-index: 2
Code 
.box1 { position: absolute; z-index: 1; }
.box2 { position: absolute; z-index: 3; }  /* on top */
.box3 { position: absolute; z-index: 2; }
Explanation: Default z-index is auto. You can use integers (e.g. 1, 10, 100). Negative values go behind. Stacking contexts (e.g. from position, opacity, transform) can affect which elements compare.

7. Quick summary