• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

CSS Z-index

← Previous Next →

The CSS z-index property controls the stacking order of elements on a webpage. When elements overlap, z-index determines which element appears on top. This property is essential for creating layered designs, dropdown menus, modals, tooltips, and interactive interfaces. In this tutorial, you will learn how z-index works, its relationship with positioning, practical examples, and best practices.

What Is CSS Z-index

The z-index property defines the stack level of an element. Elements with higher z-index values are displayed in front of elements with lower values. By default, elements have a stack level of auto, meaning they follow the natural order of the document.

z-index only works on elements that have a positioning property other than static. This includes relative, absolute, fixed, and sticky.

Why CSS Z-index Is Important

Understanding z-index is important because it:

  • Controls which elements appear on top of others

  • Helps in designing dropdown menus and tooltips

  • Is crucial for modals and popups

  • Ensures layered elements like sliders and cards display correctly

  • Improves user experience by preventing visual overlaps

Without proper z-index, overlapping elements can look broken or confusing.

Default Z-index Behavior

By default, elements have z-index: auto. This means elements follow the HTML source order. Elements declared later in the HTML appear on top of earlier elements if they overlap.

Example

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

.box1, .box2 {
    position: relative;
    width: 100px;
    height: 100px;
}
.box1 { background-color: red; top: 50px; left: 50px; }
.box2 { background-color: blue; top: 70px; left: 70px; }

In this case, .box2 appears on top because it comes later in the HTML.

Using Z-index Values

z-index accepts integer values (positive, negative, or zero).

  • Positive values bring elements forward

  • Zero is neutral

  • Negative values push elements backward

Example

.box1 { position: relative; z-index: 1; }
.box2 { position: relative; z-index: 5; }
.box3 { position: relative; z-index: -1; }

Here, .box2 appears on top, .box1 in the middle, and .box3 behind both.

Z-index and Positioning

z-index only works on elements with a positioning property other than static.

Example

div {
    z-index: 10; /* has no effect if position is static */
}

div {
    position: relative;
    z-index: 10; /* now it works */
}

Always ensure an element has position: relative, absolute, fixed, or sticky to use z-index.

Z-index in Modals and Popups

z-index is often used to ensure modals appear above all other content.

Example

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

High z-index ensures the modal overlays the rest of the page content.

Z-index for Dropdown Menus

Dropdown menus require a higher z-index to appear above other elements.

Example

.nav-item:hover .dropdown {
    display: block;
    position: absolute;
    z-index: 500;
}

This ensures the dropdown menu appears in front of other page elements.

Negative Z-index

Negative z-index values push elements behind others, useful for background layers.

Example

.background {
    position: relative;
    z-index: -1;
}

This places the background layer behind content without changing the document flow.

Common Mistakes with Z-index

  • Using z-index on static elements (has no effect)

  • Ignoring parent stacking contexts

  • Using excessively high or inconsistent values

  • Not testing on overlapping elements

Avoiding these mistakes ensures a predictable layout.

Parent Stacking Context

A stacking context is created by an element with position and z-index. Children are stacked within this context. This can affect overlapping behavior.

Example

.parent {
    position: relative;
    z-index: 10;
}
.child {
    position: absolute;
    z-index: 20;
}

The child cannot escape the parent’s stacking context when interacting with elements outside the parent.

Z-index Best Practices

  • Use the smallest necessary values for clarity

  • Create stacking only when needed

  • Understand parent stacking contexts

  • Test overlapping elements in different scenarios

  • Use z-index for layering modals, dropdowns, and tooltips

Z-index in Real-World Projects

  • Sticky headers and floating buttons

  • Modals and popups

  • Dropdown and mega menus

  • Sliders and card stacks

  • Overlapping images or text layers

Correct use of z-index ensures content is layered logically and consistently.

Summary of CSS Z-index

The CSS z-index property controls the stacking order of positioned elements. Elements with higher z-index appear in front, and negative values push elements backward. It works only with positioned elements and is essential for modals, dropdowns, floating elements, and layered layouts. Understanding stacking contexts, proper values, and parent-child relationships allows precise control of overlapping content, improving layout clarity and user experience.

Practice Questions

Q1. Make a div appear above another using z-index.

Q2. Stack .card1, .card2, and .card3 with increasing z-index.

Q3. Place a modal dialog above all other elements.

Q4. Hide an element behind the background using z-index: -1.

Q5. Create overlapping boxes and control their layer order.

Q6. Write a rule where a tooltip appears above a button.

Q7. Use inline CSS to set z-index: 9999 on a <div>.

Q8. Set multiple elements with the same z-index and observe stacking.

Q9. Create a notification banner that always appears on top.

Q10. Write a positioned container and a child with a higher z-index.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

CSS

online coding class codepractice

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

codepractice logo
Login
Go Back Top