Z‑index
Table of Contents
What is Z-Index?
Z‑index is a CSS property that controls the stacking order of positioned elements along the z‑axis, determining which layer appears on top when elements overlap.
Key points
- Usage: Applies to positioned elements (position: absolute | relative | fixed | sticky).
- Values: Integer; higher value = front.
- Stacking context: Formed by elements with position and z‑index; nested contexts can override higher global values.
- Performance: Excessively high values complicate debugging; keep within 0‑9999 scale.
- Accessibility: Ensure critical UI (modals) has highest index.
Pro tips
- Use design‑system tiers (e.g., modal 1000, tooltip 900).
- Declare z‑index sparingly; rely on natural flow where possible.
- Document z‑index scale in your CSS guidelines.
Make every message count on social.
Built for real connection, Birdeye Social helps you understand your audience, spark engagement, and drive performance across all channels.