Z-index

The navigation bar is pinned to the top of the screen, a photo of a pyramid scrolls beneath it - and suddenly the photo slides over the menu, covering its buttons. Both elements occupy the same spot on the screen, and the browser has to decide which one lies on top. You can take over that decision with the z-index property.

The z-index property in CSS is a tool that allows controlling the stacking of elements relative to each other along the Z-axis, or "depth." With it, we can determine which element should be displayed on top and which at the bottom. Imagine a scribe's table with papyrus scrolls lying one on top of another: you see only the top one in full, and z-index is the number that says in what order to stack them.

What is z-index?

The z-index property determines how elements overlap each other when they occupy the same space on the screen. It is an integer value (can be positive, negative, or zero) that determines how far "forward" or "backward" an element is placed relative to other elements. The default value is auto, and the number has no unit - you write z-index: 10, not 10px.

An element with a higher value covers an element with a lower one, so a stack of 1, 10, 100 and 999 is ordered from the bottom up. Only the relations between the numbers matter: 2 over 1 works exactly like 999 over 998.

How Does z-index Work?

The z-index property only works with elements that have their position set to relative, absolute, fixed, or sticky. With the default position: static, the browser simply ignores it - that's the most common reason why "z-index doesn't work". The exception is flex and grid items, which you'll meet in the following modules. The simplest use is an absolutely positioned element that we give a z-index of 1:

div {
  position: absolute;
  z-index: 1; /* Element will be above other elements with lower z-index value */
}

Both declarations have to work together: remove position, and z-index stops working, even though the browser reports no error. Now let's look at two papyrus scrolls occupying the same spot:

.papyrus-ramesses {
  position: absolute;
  z-index: 2;
}

.papyrus-cheops {
  position: absolute;
  z-index: 1;
}

The Ramesses papyrus lies on top, because 2 is more than 1 - even if it comes before the Cheops papyrus in the HTML. Without z-index, the code would decide the order: the element written later would lie higher.

Use Cases

The z-index property is particularly useful when you want certain elements to be visible above others - like a pharaoh's seal pressed on top of a scroll.

Navigation

If you want the navigation bar to always be on top, so that no scrolling content covers it, you can use z-index:

.navbar {
  position: fixed;
  z-index: 1000;
}

The position: fixed declaration pins the bar to the browser window, and z-index: 1000 leaves plenty of room - all the ordinary layers of the page fit underneath.

Modal Windows and Tooltips

For modal windows and tooltips, z-index allows displaying them above the rest of the page, for example over photos and cards:

.tooltip {
  position: absolute;
  z-index: 100;
}

A tooltip with a value of 100 covers ordinary content, but hides under a navigation bar with a value of 1000 - and that's usually exactly what you want.

Potential Problems

Managing z-index values can be complicated in large projects. Setting too many different values can lead to conflicts and difficulties in maintaining the code.

The second trap is the stacking context. A positioned element with a z-index set creates its own stack, and its children compete only among themselves. A child with z-index: 9999 won't rise above its parent's neighbor if the parent itself lies lower. It's like a papyrus locked in a chest: you can put it on top of the pile inside, but you can't lift it above the lid. A stacking context is also created by, among others, opacity lower than 1 and transform, which you'll meet at the end of this module.

My advice: set a few fixed levels in your project, for example 1 for ordinary overlays, 100 for tooltips and 1000 for navigation, and stick to them instead of adding ever bigger numbers. Remember: z-index is the number of a papyrus in the pile on the scribe's table - a higher one lies higher, but only when the element has its position set.