What is Position in CSS: Explained with Examples

The position property in CSS controls how an element is placed on the page. It lets you choose if an element stays in the normal flow or moves relative to its container or the viewport using values like static, relative, absolute, and fixed.

How It Works

Think of the position property as a way to decide how an object sits on a table. Normally, elements sit in order, like books lined up on a shelf. This is called static positioning, the default where elements follow the normal page flow.

If you want to nudge a book a little to the right or left without moving it off the shelf, you use relative positioning. The book stays in place but shifts slightly.

For more freedom, absolute positioning lets you pick exactly where the book goes on the table, ignoring the shelf order. It moves relative to the nearest positioned container. fixed positioning pins the book to the table itself, so it stays visible even if you move the table (scroll the page).

Example

This example shows four boxes with different position values to see how they behave on the page.

css

html, body {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
}
.container {
  position: relative;
  height: 200px;
  border: 2px solid #333;
  margin: 20px;
  padding: 10px;
}
.box {
  width: 100px;
  height: 50px;
  color: white;
  line-height: 50px;
  text-align: center;
  margin-bottom: 10px;
}
.static {
  background-color: #4CAF50;
  position: static;
}
.relative {
  background-color: #2196F3;
  position: relative;
  top: 10px;
  left: 20px;
}
.absolute {
  background-color: #f44336;
  position: absolute;
  top: 10px;
  right: 10px;
}
.fixed {
  background-color: #FF9800;
  position: fixed;
  bottom: 10px;
  left: 10px;
}

Output

A container box with four colored boxes inside: green box labeled 'static' in normal flow, blue box labeled 'relative' shifted slightly down and right, red box labeled 'absolute' placed at top-right inside container, orange box labeled 'fixed' pinned at bottom-left of the browser window even when scrolling.

When to Use

Use static when you want elements to flow naturally on the page without special positioning.

Use relative to nudge elements slightly without breaking the page layout, for example, to adjust spacing or create small animations.

absolute is great when you want to place an element exactly inside a container, like a tooltip or a dropdown menu that appears over other content.

fixed is useful for elements that should stay visible on screen while scrolling, such as navigation bars or back-to-top buttons.

Key Points

• static is the default and follows normal page flow.
• relative moves element relative to its normal spot.
• absolute positions element relative to nearest positioned ancestor.
• fixed pins element relative to the viewport, ignoring scrolling.
• Positioning helps create layered, dynamic layouts and UI elements.

Key Takeaways

The CSS position property controls how elements are placed on the page.

Use static for normal flow, relative to shift slightly, absolute for exact placement inside containers, and fixed to stay visible on scroll.

Absolute positioning depends on the nearest positioned ancestor element.

Fixed positioning keeps elements visible even when the page scrolls.

Positioning is essential for creating interactive and layered web layouts.