CSS z-index and Stacking Order

z-index

z-index controls the stacking order of positioned elements. Higher values appear on top. It only works on elements with a position other than static.

Example

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001; /* Above backdrop */
}

.navbar { z-index: 100; }
.dropdown { z-index: 200; } /* Above navbar */

CSS

Full Editor

Pro Tip

Define z-index values in CSS variables as a scale (e.g. --z-nav: 100; --z-modal: 1000;) to avoid "z-index wars."

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned