📍 CSS Positioning

Last Updated: November 2025

CSS Positioning controls where elements appear on the page. It defines how elements are placed relative to their normal position, parent container, or the viewport.

🗣 Hinglish Tip: “Position” ka matlab — element ko page pe kahan aur kaise dikhana hai (normal flow me ya alag jagah).

Position Property Types

Value	Description	Moves Using
static	Default position; elements appear in normal flow	❌ (top/left don’t work)
relative	Moves element relative to its original position	✅ top, left, right, bottom
absolute	Removes element from flow, positions relative to nearest positioned ancestor	✅ top, left, etc.
fixed	Positions element relative to viewport (stays during scroll)	✅
sticky	Behaves like relative until a scroll point is reached; then sticks	✅ (top/bottom)

position: static (Default)

By default, every element has position: static.

div {
  position: static;
}

➡ It follows the normal document flow. top, left, etc. have no effect.

🗣 Hinglish Tip: Ye “normal mode” hota hai — sab kuch natural flow me jata hai.

position: relative

Moves an element from its original position, but it still takes up the same space.

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

Useful for fine-tuning element placement or creating positioning contexts for child elements.

🗣 Hinglish Tip: Relative matlab “thoda side ho jao” — element wahi hota hai, bas offset ho jata hai.

position: absolute

The element is removed from normal flow and placed relative to its first positioned ancestor (ancestor = element having position other than static).

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  position: relative;
  width: 300px;
  height: 200px;
  background: lightblue;
}
.child {
  position: absolute;
  top: 20px;
  left: 30px;
  width: 100px;
  height: 100px;
  background: coral;
}

🗣 Hinglish Tip: Agar parent position: relative; diya hai, to child usi ke hisaab se place hota hai.

📍 position: fixed

An element with position: fixed stays in the same place even when scrolling.It is relative to the viewport.

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: black;
  color: white;
  padding: 10px;
}

🗣 Hinglish Tip: Fixed element page ke saath nahi move karta — jaise website ka sticky navbar.

position: sticky

sticky behaves like relative until a specific scroll position is reached — then it sticks.

.header {
  position: sticky;
  top: 0;
  background: yellow;
  padding: 10px;
}

🗣 Hinglish Tip: Sticky = “normal me chalo, par scroll hone pe chipak jao!”

🧩 Example: All Position Types Together

<div class="container">
  <div class="box static">Static</div>
  <div class="box relative">Relative</div>
  <div class="box absolute">Absolute</div>
  <div class="box fixed">Fixed</div>
  <div class="box sticky">Sticky</div>
</div>

.container {
  position: relative;
  height: 800px;
  padding: 50px;
}
.box {
  padding: 20px;
  margin: 10px;
  color: white;
}
.static {
  background: gray;
}
.relative {
  position: relative;
  top: 20px;
  background: blue;
}
.absolute {
  position: absolute;
  top: 50px;
  left: 100px;
  background: crimson;
}
.fixed {
  position: fixed;
  top: 10px;
  right: 10px;
  background: green;
}
.sticky {
  position: sticky;
  top: 0;
  background: orange;
}

🧠 Try this: Scroll the page and see how each behaves differently!

💡 Z-index

When elements overlap, z-index decides which one is on top.

.box1 {
  position: absolute;
  z-index: 1;
}
.box2 {
  position: absolute;
  z-index: 2; /* this one appears on top */
}

🗣 Hinglish Tip: Z-index ko “layers” samjho — bada number = upar wala layer.

← Previous Next →