Z-index

Learn element stacking with z-index.

Stacking order: z-index

Elements on a page can overlap — a notice box on top of content, a menu over a heading. The CSS z-index property decides which one sits on top and which one stays behind.

z-index works only on positioned elements, that is, ones whose position is not static. The larger the value, the higher the element sits. For example, z-index: 10 appears above z-index: 5.

Stacking context

When an element takes a z-index along with a position, it creates a new stacking context. Children inside this context cannot compete directly with outside elements; the context as a whole is ordered first within the outer context.

That is why a child with z-index: 9999 inside a modal whose own z-index: 1 may still sit below an outside element with z-index: 5. The context boundary beats the inner value.

Exercise Bring the notice to the top

Write a .notice class selector. Inside it, add both position: fixed and z-index: 100. The notice will stay fixed on screen and appear above other elements.

Show example solution

/* bring the notice forward */
.notice {
  position: fixed;
  z-index: 100;
}

Test yourself

On which element does z-index take effect?
```
.a { position: static; z-index: 5; }
.b { position: fixed; z-index: 2; }
```
- Only on .a (z-index is larger)
- Only on static elements
- Only on .b (position is not static)
- Equally on both
Show answer

Only on .b (position is not static) — Correct. z-index takes effect only on .b because its position is not static.

Bring the notice forward

.notice {
  position: relative;
  ____;
}

Show answer

.notice {
  position: relative;
  z-index: 10;
}

Match the z-index value to its position

z-index: 100

Topmost
z-index: 5

Middle
z-index: 0

Default level
z-index: -1

Background

Next lesson: Float

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies