CSS Position

CSS Minimum and Maximum values CSS Z-index

The position property defines how an element is placed in the document flow. It is one of the most important tools for layout and fine-tuning placement.

Position values

CSS position can take several values, each behaving differently in the layout.

Value	Description
static	Default value. The element is placed in the normal document flow.
relative	The element moves relative to its normal position, based on top, left, right, bottom values.
absolute	The element is positioned relative to the first non-static parent.
fixed	The element is fixed relative to the browser window and does not move when scrolling.
sticky	The element remains fixed during scrolling for a while, then returns to normal flow.

Absolute positioning

Absolute positioning allows you to precisely define where an element should appear inside its parent container.

In the above example, the red box is positioned in the top-right corner of the gray parent box.

Sticky position

Sticky position can be useful for navigation bars, as the element stays at the top of the screen while scrolling, then returns to flow.

Tips for using position

Proper use of position is essential for creating precise and responsive layouts.

Always set position: relative on the parent if you want to absolutely position a child.
Use fixed positioning carefully, as it can cover content while scrolling.
Sticky is especially useful for navigation bars and headers.