CSS Position

CSS position is one of the most important concepts in frontend development.
If you understand CSS positioning clearly, layouts become easy.

This article explains everything about CSS position with clear rules, behavior, and examples.

What is CSS Position?

CSS positioning tells the browser how an element should be placed on the page.

In simple words, it answers these questions:

Where should an element appear?
Does it follow the normal order of the page?
Can it overlap other elements?
Does it move when you scroll?
Who controls its position (parent or page)?

CSS Position Product Page Example

See the Pen Untitled by Ritik kumar (@nsaupapt-the-animator) on CodePen.

Every HTML Element Is a Box

Before learning position, remember this:

Every HTML element is a rectangular box

CSS positioning controls where that box lives on the screen.

Normal Flow

Before learning position types, you must understand normal flow.

What is Normal Flow?

Normal flow is the browser’s default layout behavior.

In normal flow:

Elements appear top to bottom
One element comes after another
Every element takes its own space
Elements push each other

Example

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>

Output

Paragraph 1 at the top
Paragraph 2 below it
Paragraph 3 below that

This is normal flow

Offset Properties

These properties are used to move elements:

top
bottom
left
right

Important Rule: Offset properties do NOT work on position: static.

CSS Position Types

CSS provides 5 position types:

static
relative
absolute
fixed
sticky

Let’s learn one by one

position: static (Default)

What is position: static?

This is the default position of every HTML element.

It means:

Browser decides the position
Element follows normal flow
HTML order is respected
You cannot move it manually

Behavior

Appears where browser places it
Cannot overlap elements
Ignores top, left, right, bottom
Always stays in normal flow

Example

.box {
  position: static;
}
/* Even this does nothing: */
.box {
  position: static;
  top: 100px;
  left: 50px;
}

Static = No control

position: relative

What is position: relative?

Relative positioning means:

Element stays in normal flow
Original space is reserved
Element can be moved visually
Other elements behave like nothing changed

Key Concept

The element moves relative to its own original position

Movement Rules

top: 20px → moves DOWN
left: 20px → moves RIGHT
bottom: 20px → moves UP
right: 20px → moves LEFT

Example

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

Result

Box moves down and right
Empty space remains at original position

Relative = Shift without breaking layout

position: absolute

What is position: absolute?

Absolute positioning means:

Element is removed from normal flow
It takes NO space
Other elements ignore it
Can be placed exactly where you want

Most Important Rule (Reference Rule)

An absolute element positions itself relative to:

The nearest parent with
relative | absolute | fixed | sticky
If no such parent exists → entire page

Behavior

Removed from normal flow
Can overlap elements
Does not push or get pushed
Uses offset properties freely

Example (With Parent)

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

Explanation

Parent becomes the reference
Child positions itself inside parent

Absolute = Free positioning inside a reference

position: fixed

What is position: fixed?

Fixed positioning means:

Element is attached to the screen
Not attached to the page content
Does not move when scrolling

Behavior

Removed from normal flow
Always stays at same spot
Scroll does not affect it

Example

.header {
  position: fixed;
  top: 0;
  width: 100%;
}

Common Uses

Fixed headers
Floating buttons
Chat icons
Back-to-top buttons

Fixed = Screen-locked element

position: sticky

What is position: sticky?

Sticky is a mix of relative and fixed.

It behaves like:

relative at first
fixed after scrolling reaches a limit

Important Rules

Starts in normal flow
Takes space
Needs top, left, etc.
Sticks only within its parent
Stops when parent ends

Example

.title {
  position: sticky;
  top: 0;
}

Common Uses

Section headers
Table headers
Menu bars inside containers

Sticky = Smart scrolling behavior

z-index (Stacking Order)

What is z-index?

z-index controls which element appears on top.

Rules

Works only on positioned elements
Higher number appears on top
Does not work on static
Can be positive or negative

Example

.box1 {
  z-index: 1;
}
.box2 {
  z-index: 2;
}