Z-index is a CSS property that decides which element sits on top when two or more overlap on a page. Higher numbers come forward, lower numbers fall behind. It controls depth, the front-to-back order, rather than left, right, up or down.
Imagine a stack of papers on a desk. The sheet you place last lands on top and hides whatever is underneath. Z-index does the same thing for layers on a screen: a dropdown menu, a cookie banner, or a lightbox photo viewer all need a high value so they appear above the normal content instead of disappearing behind it. A sticky navigation bar that stays at the top while you scroll also depends on it to float over everything else.
Here is the part that trips people up. Z-index only works on elements that have a position set, and it operates inside something called a stacking context. So a child element can never escape above a sibling of its parent, no matter how big its number is. A z-index of 9999 looks powerful but does nothing if the element underneath is in a separate context. Understanding that quirk is what separates a quick fix from code that keeps breaking. This is one of the most common bugs in everyday front-end work. A modal opens but slides behind the navigation bar. A tooltip vanishes under the next card. Nine times out of ten the fix is not a bigger number but a smaller, planned set of layers. Many teams keep a short scale, say 10 for headers, 100 for dropdowns, 1000 for modals, so everyone reaches for the same values instead of inventing new ones.
At TopDevs we plan stacking order deliberately in our CSS, so menus, modals and overlays always land in the right layer instead of fighting each other with ever-bigger numbers.
