Why is z-index Not Working?

Why-is-z-index-Not-Working-and-How-to-Fix-it-feature.jpg

You can use the z-index property in CSS to help you control which element should appear at the top of others on a webpage. But sometimes it might not work. This blog will be helpful if you have faced issues like overlapping elements incorrectly or ignoring your z-index settings. You can figure it out and fix it with the solutions given below.    

Table of Contents:

Understanding z-index and Stacking Context

You should understand the workings of z-index before you start fixing the issue. 

What is z-index?

You can use the z-index property in CSS to stack the elements on top of others. You can see the elements with a higher z-index come first than the lower ones.  

Syntax: 

.element1 {
  position: absolute;
  z-index: 1;
}
.element2 {
  position: absolute;
  z-index: 2;
}

The .element2 will show up in front of .element1 because it has a higher z-index value.

What is Stacking? 

A stacking context is like a group of elements with special stacking rules. You can create when the element has properties like position: relative, position: absolute, position: fixed, opacity less than 1, transform, filter, or will-change.

When the new stacking rules are made, the child elements inside it stay within that context, and that cannot be broken. This is the reason why z-index might not work.   

Common Reasons and Solutions

There are a few reasons why z-index is not working. Let us discuss these reasons with the solution: 

Reason 1: The Element Lacks a Positioning Context 

You can use the z-index property to work on the element that is set to position, like relative, absolute, or fixed. If the position is position: static by default, z-index won’t work.

Solution: 

<!DOCTYPE html>
<html>
<head>
    <style>
        .box1 {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: red;
            z-index: 1;
        }
        .box2 {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-top: -100px;
            z-index: 2;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

Output: 

Element Lacks a Positioning Context

Explanation: You can get two overlapping boxes from this code. Box 1(red) is placed first with z-index: 1, and box 2(blue) overlaps it using margin-top: -100px, which appears in front with z-index: 2. You can use relative positioning for proper stacking.   

Reason 2: Parent’s Stacking Context is Overriding the z-index

You can see the element that is inside a parent that creates a stacking context, and the z-index will depend parent instead of the whole document.

Solution: 

<!DOCTYPE html>
<html>
<head>
    <style>
        .parent {
            position: relative;
            z-index: 1;
            background-color: lightgray;
            padding: 20px;
        }
        .child {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: green;
            z-index: 2;
        }
    </style>
</head>
<body>
    <div class="parent">
        Parent Div
        <div class="child">Child Box</div>
    </div>
</body>
</html>

Output: 

Parent’s Stacking Context is Overriding the z-index

Explanation: The parent element (light grey box) creates a stacking context with relative positioning and z-index: 1. The child element (green box), with absolute positioning and z-index: 2, appears on top within this context.

Reason 3: Negative z-index Values Can Be Problematic

If you use a negative z-index, it moves the element behind other content. However, it could get hidden behind the body background if its parent element doesn’t support negative stacking.

Solution: 

<!DOCTYPE html>
<html>
<head>
    <style>
        .parent {
            position: relative;
        }
        .child {
            position: absolute;
            z-index: -1;
            background-color: yellow;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">Behind Parent</div>
    </div>
</body>
</html>

Output: 

Negative z-index Values Can Be Problematic

Explanation: This code creates a parent element and a child element. The child (yellow box) has absolute positioning and a z-index: -1, which places it behind the parent element. Since the parent has relative positioning, it establishes a stacking context.

Reason 4: Fixed Position Elements

When you use position: fixed, the element is removed from the regular document layout and usually shows up on top of other elements.

Solution:

You should set an appropriate z-index for both elements.

<!DOCTYPE html>
<html>
<head>
    <style>
        .fixed-box {
            position: fixed;
            top: 50px;
            left: 50px;
            width: 150px;
            height: 150px;
            background-color: orange;
            z-index: 1000;
        }
    </style>
</head>
<body>
    <div class="fixed-box">Fixed Box</div>
</body>
</html>

Output: 

Fixed Position Elements

Explanation: You can create a box in a fixed position on the screen using this code. You can use top: 50px and left: 50px to place it 50 pixels away from the top-left corner. The z-index: 1000 makes it appear on top of other elements.    

Conclusion 

You can use z-index to control which elements appear on top. This only works if the element has a relative, absolute, or fixed position. The new stacking rules by the parent element make z-index values override child elements. The negative z-index values can hide elements if it is unsupported by the parent. You should have a better understanding of stacking rules to resolve these issues effectively.

Why is z-index Not Working? – FAQs

1. Why isn't z-index working on my element?

z-index only works on elements with position: relative, absolute, or fixed. If your element has position: static (default), z-index won’t apply.

2.Why is my z-index value being ignored?

A parent element may have created a new stacking context, which limits how z-index works for child elements.

3. Why is my negative z-index hiding the element?

A negative z-index can push an element behind others, but it may also disappear behind the body background if the parent doesn’t support negative stacking.

4. Why is a fixed-position element always on top?

Fixed elements are often removed from the normal document flow, so their z-index needs to be adjusted for proper stacking.

5. How can I fix z-index issues caused by stacking contexts?

Check the parent elements for properties like opacity, transform, or filter, which might create stacking contexts, and adjust their z-index accordingly.

About the Author

Software Developer | Technical Research Analyst Lead | Full Stack & Cloud Systems

Ayaan Alam is a skilled Software Developer and Technical Research Analyst Lead with 2 years of professional experience in Java, Python, and C++. With expertise in full-stack development, system design, and cloud computing, he consistently delivers high-quality, scalable solutions. Known for producing accurate and insightful technical content, Ayaan contributes valuable knowledge to the developer community.

Full Stack Developer Course Banner