📍 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
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.
