← Back to Home

Mastering CSS Positioning

What is Positioning?

The position property in CSS specifies how an element is positioned in the document. Along with the "offset" properties (top, right, bottom, and left), it allows you to take elements out of the normal document flow and place them exactly where you want.

This was a common way to create layouts before Flexbox and Grid, but today it's mainly used for UI elements like modals, tooltips, and navigation bars.

Interactive Playground

Parent Container

Watch what happens to the absolute child when you toggle this!

Child Item

Use 'auto' to disable a property.

Parent Container

Child Item
Original Position

Live CSS Output

/* Parent Styles */
.parent {
  position: static;
}

/* Child Styles */
.child {
  position: static;
  top: auto;
  left: auto;
  bottom: auto;
  right: auto;
}

The position Values Explained

static (Default)

The element is positioned according to the normal flow of the document. The top, right, bottom, and left properties have no effect.

relative

The element is positioned according to the normal flow, but then offset relative to itself based on top, etc. The space it would have taken is still preserved.

Crucially, this also makes the element a "containing block" for any absolute children.

absolute

The element is removed from the normal flow. It is positioned relative to its nearest "positioned" ancestor (i.e., an ancestor with position set to relative, absolute, fixed, or sticky). If no such ancestor exists, it's positioned relative to the initial containing block (usually the <html> element).

fixed

The element is removed from the normal flow. It is positioned relative to the viewport (the browser window). It will stay in the same place even when the page is scrolled.

sticky

A hybrid of relative and fixed. The element acts like relative until it hits a specified offset (e.g., top: 0) during scrolling, at which point it "sticks" in place like fixed. (Note: May behave oddly in this container due to overflow: hidden).