</>
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.

Common Causes

  • Setting z-index on an element that still has the default position: static.
  • Raising the z-index number repeatedly, assuming a bigger value will force it on top.
  • Expecting z-index to work across stacking contexts, when a parent's context caps the child.

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.

Frequently Asked Questions

Why is my z-index being ignored?
z-index only applies to positioned elements. If the element still has position: static (the default), the browser ignores z-index entirely. Add position: relative, absolute, fixed, or sticky to activate it.
Does a higher z-index always win?
Only within the same stacking context. A child can never escape its parent's context, so an element with z-index 1 inside a high-stacked parent can sit above an element with z-index 9999 in a lower parent.
Which position value should I use just to enable z-index?
position: relative is the lightest choice. Without offsets it does not move the element at all, but it makes the element positioned, so z-index starts taking effect.

Check Your CSS Now

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

Open CSS Validator

Related CSS Errors

Invalid CSS Property Value

Learn why an invalid CSS property value silently breaks your styling, and how to fix the common color, unit, keyword, and function mistakes quickly.

Unknown CSS Property

Fix unknown or misspelled CSS property names that the browser ignores. Spot the typos, vendor-prefix slips, and made-up properties breaking your styles.

Overuse of !important

Learn why overusing !important makes CSS unmaintainable, and how to fix specificity battles using cascade layers and selectors instead of forced overrides.

View all CSS errors