CSS The z-index Property

⭐ CSS z-index Property 

z-index controls which element appears on top when elements overlap.

Higher z-index = On top
Lower z-index = Behind

 Important Rule:

z-index works only on elements with:

• position: relative;

• position: absolute;

• position: fixed;

• position: sticky;

It does not work with position: static; (default).

Basic Example

box2 will appear on top of box1.

Higher vs Lower Values

The blue element will overlap the red one.

Negative z-index

Element goes behind everything else.

Without Position (❌ Doesn’t work)

📌 Example (Complete)

✔ Blue box appears on top
✔ Red box stays behind

⭐ Summary