CSS POSITION PROPERTY | CSS STATIC AND RELATIVE POSITION

In CSS, position : static and position: relative both keep an element in the normal document flow, but they behave differently.

1. position: static

This is the default position of every element.

.box {
  position: static;
}

• Element stays in the normal document flow.
• top, right, bottom, and left do not work.
• z-index generally doesn't apply.

.box {
  position: static;
  top: 20px; /* Doesn't work */
}

2. position: relative

The element remains in the normal document flow, but you can move it relative to its original position.

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

This moves the box 20px down and 30px to the right.

Importantly, its original space is still reserved.

Key difference

Property	static	relative
Normal document flow	✅	✅
top/left/right/bottom work	❌	✅
Can be offset from original position	❌	✅
Default position	✅	❌

Important use of relative

position: relative is commonly used as a parent for an absolutely positioned child:

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  right: 0;
}

Here, .child is positioned relative to .parent.

Easy way to remember:

static = normal/default 

relative = normal + you can move it from its original position.