</>
ValidateHTML

z-index Without Position

z-index only works on positioned elements (position: relative, absolute, fixed, or sticky). On a static element (the default), z-index is completely ignored. This is the #1 reason developers think z-index is 'broken'.

Why It Matters

Setting z-index: 9999 on a static element does absolutely nothing. The element stays in its normal stacking order regardless of the z-index value. Developers often increase the number thinking it will help, but the issue is the missing position property.

Code Examples

Bad CSS
.modal {
  z-index: 9999;    /* ignored: position is static */
  background: white;
}

.overlay {
  z-index: 100;     /* also ignored */
  background: rgba(0,0,0,0.5);
}
Good CSS
.modal {
  position: relative; /* now z-index works */
  z-index: 10;
  background: white;
}

.overlay {
  position: fixed;    /* positioned: z-index works */
  z-index: 5;
  inset: 0;
  background: rgba(0,0,0,0.5);
}

How to Fix

  • 1Always pair z-index with a position value: relative, absolute, fixed, or sticky.
  • 2position: relative is the lightest option, it doesn't move the element.
  • 3Keep z-index values low and organized (1-10), not arbitrary high numbers.
  • 4Use CSS stacking context rules: a child's z-index only competes within its parent's context.

Check Your CSS Now

Our CSS validator detects this error automatically and shows the exact line number.

Open CSS Validator
Recommended

Hostinger — Fast & Affordable Web Hosting

Deploy clean, validated CSS on reliable hosting.

Get 80% Off Hosting →

Related CSS Errors

Invalid CSS Property Value

Learn why CSS property values are invalid and how to fix them. Common mistakes with colors, units, and keywords.

Unknown CSS Property

How to fix unknown or misspelled CSS property names. Common typos and non-standard properties.

Overuse of !important

Why !important makes CSS unmaintainable. How to fix specificity issues without it.

View all CSS errors