🎨 CSS Z-Index Interactive Demo

💡 How it works: Z-index controls which elements appear on top of others. Higher numbers = closer to you!

📚 Interactive Stacking Example

Use the sliders below to change each box's z-index and see how they stack!

Red Box
z-index: 1
Blue Box
z-index: 2
Green Box
z-index: 3
Yellow Box
z-index: 4
1
2
3
4

📖 Negative Z-Index Example

Elements with negative z-index go behind their parent container:

This text has z-index: 1
The red box behind has z-index: -1
🔍 Key Rules: