CSS Position

The position property controls how an element is placed in the layout. Combine it with top, right, bottom, and left to offset elements, create overlays, sticky bars, or fixed buttons.

1) position: static (default)


.static { position: static; } /* offsets are ignored */
Normal flow

Elements are positioned according to the document flow. Offset properties have no effect.

2) position: relative


.relative { position: relative; top: 4px; }

Offset from itself The element remains in flow, but you can “nudge” it. Also serves as the containing block for absolutely-positioned children.

3) position: absolute (inside a relative parent)


.parent { position: relative; }
.child  { position: absolute; top: 8px; right: 8px; }
top-left
bottom-right
centered (50%/-50%)

Tip: Absolute elements are removed from the normal flow.

4) position: fixed


.fixed-btn {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 999;
}

Fixed elements stay pinned to the viewport (e.g., “Back to top” buttons, chat widgets).

5) position: sticky


.sticky-head {
  position: sticky;
  top: 0;
}
Sticky section title

Scrollable content line 1…

Scrollable content line 2…

Scrollable content line 3…

Scrollable content line 4…

Scrollable content line 5…

Scrollable content line 6…

Scrollable content line 7…

Scrollable content line 8…

Scrollable content line 9…

Scrollable content line 10…

Sticky sticks within its scroll container when crossing the threshold.

6) Offsets: top, right, bottom, left


.abs {
  position: absolute;
  top: 16px;
  left: 16px;
}
top:8px; left:8px;

Offsets apply to non-static elements only.

7) z-index & stacking contexts


.a { position: absolute; z-index: 1; }
.b { position: absolute; z-index: 2; }
/* new stacking contexts can be created by position + z-index, opacity < 1, transform, filter, etc. */
z:1
z:2
z:3
Parent (transform creates new stacking context)
child z:999
outside z:2

Even with a high z-index, items can’t escape their stacking context.

8) Centering with Absolute + Transform


.center{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
Perfect center

Quick Notes:

  • relative establishes a containing block for absolute children.
  • fixed is pinned to the viewport; beware of clipping inside transformed ancestors.
  • sticky needs a scrollable ancestor and a threshold like top: 0.
  • New stacking contexts are created by position + z-index, opacity < 1, transform, filter, etc.
  • Avoid using z-index wars; manage contexts intentionally.