Description & Usage

The position property dictates the positional algorithm used to place an element on screen. Combined with offset properties (top, right, bottom, left) and z-index, it gives precise control over element placement beyond normal document flow.

Understanding position is crucial for building UI components like sticky headers, modal overlays, tooltips, and floating action buttons. Relative positioning keeps an element in the document flow while shifting its visual appearance, whereas absolute positioning removes it entirely from normal flow relative to its nearest positioned ancestor.

Sticky positioning provides a hybrid experience: elements behave as relative until a scroll threshold is crossed, at which point they lock into a fixed position within their containing block.

Property Specifications

Property FeatureSpecification
CategoryLayout
Initial Valuestatic
InheritedNo (not inherited)
Applies ToAll elements
Position & Z-Index Playground
20px
30px
2
Container (relative)
Box 1 (z: 1)
Target (relative)
Box 2 (z: 3)
.target-element { position: relative; top: 20px; left: 30px; z-index: 2; }

Syntax

position: static | relative | absolute | fixed | sticky;

Property Values

ValueDescription
staticDefault. Element follows normal document flow. Top/right/bottom/left and z-index are ignored.
relativePositioned relative to its normal position without affecting neighboring elements.
absoluteRemoved from normal flow. Positioned relative to nearest positioned ancestor (non-static).
fixedRemoved from normal flow. Positioned relative to the browser viewport.
stickyTreated as relative until a scroll threshold is met, then sticks to offset position.

Code Examples

Absolute Positioning inside Relative Container
.parent { position: relative; } .badge { position: absolute; top: -5px; right: -5px; }
Positions the badge relative to top-right corner of parent container.