Z-Index Medium Priority z-20
Position elements at medium priority stacking level with z-index: 20, ideal for sticky elements and overlays.
Quick Reference
Class Details
Class:z-20
CSS:z-index: 20
Stacking level:Medium priority
Common Use Cases
• Sticky navigation elements
• Content overlays
• Floating action buttons
• Secondary UI panels
Interactive Examples
Sticky Navigation
Sticky Header (z-20)
Content Block 1
Content Block 2
Content Block 3
Content Block 4
✓ z-20 keeps navigation above scrolling content
✓ Perfect for sticky headers and sidebars
Content Overlay
Content Overlay
This overlay sits at z-20 above the background.
✓ z-20 creates effective content overlays
✓ Maintains visibility over complex backgrounds
Floating Action Button
Main content area with various elements and text content.
+
✓ z-20 ensures FAB stays above content
✓ Always accessible for user interaction
Stacking Hierarchy
z-0
z-10
z-20
z-30
✓ z-20 sits in the middle of the hierarchy
✓ Above z-10 dropdowns, below z-30 headers
When to Use Z-20
📌 Sticky Elements
Keep navigation and headers visible.
<nav class="sticky top-0 z-20"> 🎭 Content Overlays
Create overlays above background content.
<div class="absolute z-20">Overlay</div> 🔘 Floating Buttons
Position action buttons above content.
<button class="fixed z-20">FAB</button> 📱 Secondary Panels
Show secondary UI components.
<aside class="fixed z-20">Panel</aside>