What is Position in CSS?

What is CSS position?

The CSS position property defines how an element is positioned in a layout.

It controls whether an element stays in normal flow or is manually placed using coordinates like top, left, right, and bottom.

1. Static (default)

Every element is static by default. It follows normal document flow.

div {
  position: static;
}

2. Relative

The element stays in normal flow but can be shifted relative to its original position.

div {
  position: relative;
  top: 10px;
  left: 20px;
}

3. Absolute

The element is removed from normal flow and positioned relative to the nearest positioned ancestor.

div {
  position: absolute;
  top: 0;
  right: 0;
}

4. Fixed

The element is fixed relative to the browser window and does not move when scrolling.

div {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

5. Sticky

Sticky elements behave like relative elements until a scroll threshold is reached, then they stick.

div {
  position: sticky;
  top: 0;
}

Key differences

• Static → default flow
• Relative → moves from original position
• Absolute → removed from flow
• Fixed → stays on screen during scroll
• Sticky → hybrid of relative + fixed

Real-world usage

• Sticky headers
• Popups and modals
• Floating buttons
• Tooltips

Summary

CSS position controls how elements are placed on a page. Each value gives different control over layout and scrolling behavior.

Understanding positioning is essential for building modern UI layouts.