positioning
position
Controls how an element is positioned in the document and whether it participates in normal flow. Non-static values enable top/right/bottom/left offsets and create a positioning context.
position: static | relative | absolute | fixed | stickyCommon values
| Value | Effect |
|---|---|
| static | Default; element sits in normal flow |
| relative | Stays in flow but can be offset from its normal spot |
| absolute | Removed from flow; positioned relative to nearest positioned ancestor |
| fixed | Positioned relative to the viewport, ignoring scroll |
| sticky | Behaves relatively until a scroll threshold, then sticks |
Examples
.tooltip { position: absolute; top: 100%; left: 0; }Pins tooltip just below a relatively-positioned parent
.header { position: sticky; top: 0; }Header sticks to top of viewport on scroll
.modal { position: fixed; inset: 0; }Fills viewport regardless of scrolling
Gotcha
sticky needs a scroll container without overflow: hidden and requires a threshold (top/left/etc.) to activate.
Related properties
transform
Applies 2D or 3D transformations like translate, rotate, scale, and skew to an element. Transforms are GPU-accelerated and do not affect surrounding layout.
z-index
Sets the stack order of positioned elements along the z-axis. Higher values are drawn in front of lower ones within the same stacking context.
display
Sets whether an element is treated as a block or inline box and defines the layout used for its children. It is the single most important property for controlling how boxes participate in the flow.
overflow
Determines what happens when content exceeds its box's boundaries. Setting overflow to anything but visible creates a new block formatting context.