Depth Layering & Z-Index
What is Z-Index?
Imagine drawing on sheets of clear plastic slides. If you stack three slides on top of each other, the drawing on the top slide will block the drawings underneath it. If you slide a sheet to the bottom of the stack, it becomes hidden behind the others.In CSS, the z-index property controls the 3D stacking order of overlapping elements along the virtual Z-axis (pointing out of the screen toward your eyes). Elements with higher z-index numbers are stacked on top of elements with lower numbers.
Why does it matter?
z-index is critical for managing overlays. When you build a modal popup box, a dropdown menu, or a fixed header bar, you must assign them higherz-index values to ensure they float *over* the main page text and images instead of clipping underneath them.
Syntax Breakdown
z-index: 10; — Standard layering value.z-index only works on elements that have their position property explicitly set* (e.g. relative, absolute, fixed, sticky). It has zero effect on default position: static; elements!Common Mistakes
z-index: 999; on a default element without writing position: relative; or similar is the most common mistake. Always add a position!z-index: 9999999; to force an element to the front is bad practice. Keep your z-index scales organized (e.g., headers = 100, modal background = 200, modal content = 300).Quick Reference
z-index — Stacking order priority score.Positioned elements only — Requires relative/absolute/fixed/sticky positioning to trigger.Your Task
Bring `.box-2` to the front of `.box-1` by setting its `z-index` to `5`.
index.html
Type code above to start the lesson.
Live Preview