CSS Issue: z-index is not working / Element is still behind another

Educational use only. Content explains errors and defensive fixes for systems you own or are authorised to test. Do not use any technique here to access data, accounts, or networks without permission.

Root Cause

The `z-index` property in CSS only applies to positioned elements (i.e., those with a `position` value other than the default `static`, such as `relative`, `absolute`, `fixed`, or `sticky`). A very common mistake is adding `z-index: 9999;` to a static element and wondering why it doesn't move forward. Furthermore, `z-index` values are not globally absolute; they are relative to their 'stacking context'. If an element is inside a parent container that creates a new stacking context (e.g., the parent has `position: relative` and a `z-index`), the child element can never overlap elements that are in a higher stacking context, regardless of how large the child's `z-index` value is. Other properties like `opacity` (less than 1), `transform`, or `filter` can also inadvertently create new stacking contexts.

Fix / Solution

First, ensure the element has a position assigned (e.g., `position: relative;`). If it still doesn't work, inspect the DOM tree upwards to find the parent element establishing the stacking context that is holding it back. You may need to increase the `z-index` of that parent container rather than the child element itself.

Code Snippet

/* ❌ Broken — z-index ignored because position is static by default */
.modal {
  z-index: 9999;
  background: white;
}

/* ✅ Fixed — Added position: relative (or absolute/fixed) */
.modal {
  position: relative;
  z-index: 9999;
  background: white;
}

/* 💡 Tip: If still broken, check parent containers for low z-index or 'opacity: 0.99' */