CSS Position

1. Static

Static is the default position.

Static

2. Relative

Relative moves from its original position.

Relative

3. Absolute

Absolute positions an element according to its parent.

Absolute element ka parent relative, fixed, sticky ho sakta hai. Is situation mein absolute child apne positioned parent ke according position hota hai.

POSITION CSS

Relative Parent

Relative parent ke andar absolute

NEW
01

Absolute

Parent: relative
Child: absolute

Hover to flip
POSITION CSS

Sticky Parent

Sticky parent ke andar absolute

NEW
02

Absolute in Sticky

Parent: sticky
Child: absolute

Hover to flip
POSITION CSS

Fixed Parent

Fixed parent ke andar absolute

NEW
03

Absolute in Fixed

Parent: fixed
Child: absolute

Hover to flip

4. Sticky

Sticky Navbar

What is Sticky?

Sticky element normal position par rehta hai, lekin scroll karne par specified position par stick ho jata hai.

Scroll down...


Ab page ko dheere dheere scroll karein aur dekhein ke orange navbar kis tarah top par rukta hai.

Sticky navigation websites mein bohat useful hoti hai. User scroll karta rahe, lekin important menu screen par visible rehta hai.


CSS mein position: sticky tab kaam karta hai jab element ko top ya bottom ki value di jaye.


Scroll karte waqt orange navbar ko observe karein. Yeh apni position se move hoga aur phir page ke top par stick ho jayega.


Sticky element apne parent container ke andar hi rehta hai. Parent section ke end par pohanchne ke baad yeh bhi scroll ho jata hai.


Sticky headers blogs, documentation pages aur shopping websites mein aksar use kiye jate hain.


Practice ke liye top: 0 ko kisi aur value se replace karke dekhein aur page ka behavior compare karein.


Web pages par sticky menu user ko different sections ke darmiyan jaldi move karne mein help karta hai.


Sticky sidebar articles, dashboards aur online courses mein useful hota hai, kyunki important links hamesha accessible rehte hain.


Agar sticky element kisi doosre element ke peeche chala jaye, to usay upar dikhane ke liye z-index property use ki ja sakti hai.


Sticky aur fixed mein farq yeh hai ke sticky apne parent ke andar limited rehta hai, jabke fixed element viewport ke saath attached rehta hai.

5. Fixed

Fixed element viewport ke saath attached rehta hai.

Scroll karte waqt yeh apni position par rehta hai.

Faryal Razzaq