Z-Index Higher Priority z-40
Position elements at higher priority stacking level with z-index: 40, ideal for modal backdrops and overlay systems.
Quick Reference
Class Details
Class:z-40
CSS:z-index: 40
Stacking level:Higher priority
Common Use Cases
• Modal backdrops
• Overlay systems
• Loading screens
• Full-screen overlays
Interactive Examples
Modal Backdrop
Page content
More content
Modal Dialog
Backdrop at z-40, modal at z-50
✓ z-40 backdrop covers all content below
✓ Creates focus on modal content
Loading Overlay
App Interface
User Content
Navigation
Loading...
✓ z-40 prevents interaction with app
✓ Shows loading state clearly
Overlay System
Base Layer
z-10 Element
z-40 Overlay System
✓ z-40 covers all lower priority elements
✓ Creates distinct interaction layer
Stacking Order
z-20
z-30
z-40
z-50
✓ z-40 appears above z-20 and z-30
✓ Below z-50 modal content
When to Use Z-40
🎭 Modal Backdrops
Create modal overlay backgrounds.
<div class="fixed inset-0 z-40"> ⏳ Loading Screens
Show loading states over content.
<div class="absolute inset-0 z-40"> 🔒 Overlay Systems
Create interaction blocking layers.
<div class="fixed z-40">Overlay</div> 📱 Full-Screen UI
Cover entire viewport.
<div class="fixed inset-0 z-40">