CSS Positioning

What is CSS position ?

The position property tells the browser how to place an element on the page — normally, relative to its parent, the page, or itself.

Types of CSS Positioning

1. static (default)

• Normal flow — no positioning.
• You can’t use top, left, right, bottom.

div {
  position: static;
}

2. relative

• Moves the element relative to its original position.
• Space is still reserved in its original place.

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

Moves the element 10px down and 20px right, but the original space stays.

3. absolute

• Moves the element relative to the nearest positioned ancestor (not static).
• If no ancestor is positioned, it uses the entire page (html).
• Element is removed from normal flow (doesn’t affect others).

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

Perfect for dropdowns, popups, tooltips, etc.

4. fixed

• Stays fixed relative to the viewport (screen).
• Does not scroll with the page.

div {
  position: fixed;
  bottom: 0;
  right: 0;
}

Used for sticky headers, footers, or buttons.

5. sticky

• Acts like relative until a certain scroll position, then acts like fixed.

div {
  position: sticky;
  top: 0;
}

Useful for sticky navbars or section headings.