Z-index in CSS

Z-index in CSS Property

Z-index in CSS ek property hai jo elements ka stack order (upar–neeche placement) define karti hai.

Simple words me:
Kaunsa element front me dikhega aur kaunsa behind jayega, ye decide karta hai.

---

Stack Order kya hota hai?

Jab elements positioned hote hain (jaise absolute, relative, etc.), tab wo overlap kar sakte hain.

Is case me:

• Higher z-index → upar (front)
• Lower z-index → neeche (back)

---

Positive aur Negative Values

Z-index in CSS me:

• Positive value → element upar aata hai
• Negative value → element peeche chala jata hai

Example

Yaha image peeche chali jayegi aur text uske upar dikhega.

---

Important Note

z-index in css sirf positioned elements par kaam karta hai, jaise:

• position: absolute
• position: relative
• position: fixed
• position: sticky

Aur:

• flex items (jo display: flex ke direct children hote hain)

---

Stack Order Z-index

Jiska z-index zyada hoga, wo element upar dikhega.

Example

Yaha order hoga:

• box2 (z-index: 3) → sabse upar
• box3 (z-index: 2) → beech me
• box1 (z-index: 1) → sabse neeche

---

Without Z-index

Agar z-index in css use nahi kiya, to elements ka order depend karega:

• HTML me jo baad me likha hai → wo upar dikhega
• Jo pehle likha hai → wo neeche rahega

Example

Agar HTML me order hai:

To:

• box3 → sabse upar
• box2 → beech
• box1 → neeche