CSS z-index

The z-index property controls which element appears on top when two or more positioned elements overlap.

It works only with elements that have a position value such as relative, absolute, fixed, or sticky.

.box1{

    position:absolute;

    z-index:1;

}

.box2{

    position:absolute;

    z-index:2;

}

Every webpage has a stacking order. When elements overlap, the browser decides which one appears in front.

.red{

    position:relative;

    z-index:1;

}

.blue{

    position:relative;

    z-index:5;

}

The z-index property has no effect on statically positioned elements. It works only when the element has a position value other than static.

.box{

    position:relative;

    z-index:100;

}

The z-index value can be positive, zero, or negative.

.front{

    position:absolute;

    z-index:10;

}

.back{

    position:absolute;

    z-index:-1;

}

A common use of z-index is displaying navigation bars, popups, modals, tooltips, and floating buttons above other page content.

.header{

    position:fixed;

    top:0;

    z-index:999;

}

.modal{

    position:fixed;

    z-index:1000;

}

Elements with position: absolute; can overlap other elements. The z-index property determines which element appears on top.

.box1{

    position:absolute;

    left:50px;

    top:50px;

    z-index:1;

}

.box2{

    position:absolute;

    left:80px;

    top:80px;

    z-index:5;

}

Fixed elements remain visible while scrolling. A high z-index keeps them above the page content.

.header{

    position:fixed;

    top:0;

    width:100%;

    z-index:999;

}

Sticky elements behave like relative elements until they reach a scroll position, after which they become fixed. A proper z-index prevents other elements from covering them.

.menu{

    position:sticky;

    top:0;

    z-index:100;

}

The z-index property is widely used in modern websites to control the display order of overlapping elements.

.chat-button{

    position:fixed;

    bottom:20px;

    right:20px;

    z-index:9999;

}

.popup{

    position:fixed;

    z-index:1000;

}

Following best practices makes your webpage easier to manage and prevents unexpected overlapping issues.

• Use z-index only when necessary.
• Always apply a position property before using z-index.
• Use small, meaningful values instead of extremely large numbers.
• Create a consistent z-index scale for your project.
• Use higher values only for important UI components.
• Test overlapping elements on different screen sizes.
• Avoid unnecessary stacking conflicts.
• Document z-index values in large projects.

❌ Incorrect

.box{

    z-index:100;

}

✔ Correct

.box{

    position:relative;

    z-index:100;

}

The z-index property is supported by all modern web browsers.

1. What is the purpose of the CSS z-index property?
2. When does z-index work?
3. Can z-index be used with position: static?
4. What happens when two elements have different z-index values?
5. Can z-index have negative values?
6. What is the default stacking order?
7. Why is position: relative commonly used with z-index?
8. How is z-index used in modal windows?
9. What is stacking order in CSS?
10. Which element appears on top when overlapping?

In this lesson, you learned:

• ✔ Introduction to CSS z-index.
• ✔ Stacking order.
• ✔ Using z-index with positioned elements.
• ✔ Positive and negative z-index values.
• ✔ Practical examples.
• ✔ z-index with absolute, fixed, and sticky positioning.
• ✔ Real-world applications.
• ✔ Best practices and common mistakes.
• ✔ Browser support.
• ✔ Interview questions.