CSS Position Explained: Static, Relative, Absolute, Fixed & Sticky.

When I started learning CSS, position was one of those properties that looked simple but was actually confusing.

I knew there were values like relative, absolute, fixed, and sticky, but I wasn't really sure when to use each one.

So I decided to understand them with simple examples.

What is the CSS position property?

The position property controls how an element is positioned on a webpage.

The most commonly used values are:

position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

Let's understand them one by one.

1. position: static

static is the default position of an element.

.box {
  position: static;
}

The element stays in the normal document flow.

For example:

Hello

With static, properties like:

top
right
bottom
left

don't move the element.

So this won't have the expected positioning effect:

.box {
  position: static;
  top: 50px;
}

The element remains in its normal position.

Think: static = normal/default positioning.

2. position: relative

relative keeps the element in the normal document flow, but now we can move it using:

top
right
bottom
left

Example:

.box {
  position: relative;
  top: 20px;
  left: 30px;
}

The box moves 20px down and 30px to the right from its original position.

One important thing:

The element's original space is still preserved.

So other elements don't act as if the box completely disappeared from its original position.

Think: relative = normal position + ability to move.

3. position: absolute

This one is a little different.

An absolutely positioned element is removed from the normal document flow.

.box {
  position: absolute;
  top: 20px;
  right: 20px;
}

The element is positioned relative to its nearest positioned ancestor.

Usually, we create a parent with:

.parent {
  position: relative;
}

and then position the child:

.child {
  position: absolute;
  top: 10px;
  right: 10px;
}

For example:

<div class="parent">
  <div class="child">Hello</div>
</div>
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 10px;
  right: 10px;
}

This pattern is very common.

For example, you might use it for:

Notification badges
Icons inside input boxes
Text over images
Dropdown menus
Buttons positioned inside cards

Think: absolute = remove from normal flow and position precisely.

4. position: fixed

fixed positions an element relative to the viewport.

For example:

.button {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

The button stays in the same place even when you scroll.

This is useful for things like:

Floating buttons
Chat buttons
Back-to-top buttons
Fixed navigation bars

Example:

<button class="top-button">↑</button>
.top-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

Now the button remains visible while scrolling.

Think: fixed = fixed to the viewport.

5. position: sticky

sticky is probably the most interesting one.

It behaves like a normal element initially, but when you scroll to a specified position, it sticks there.

Example:

header {
  position: sticky;
  top: 0;
}

The header behaves normally until it reaches the top of the viewport.

Then it sticks there while scrolling.

This is commonly used for:

Sticky navigation bars
Table headers
Section headings
Sidebar elements

Think: sticky = normal until scrolling reaches the specified position.

The basic idea is:

static → normal
relative → move from normal position
absolute → precise positioning
fixed → attached to viewport
sticky → sticks while scrolling