CSS Z-Index Practice Questions with Solutions

By /

Introduction

The CSS z-index property controls the stacking order of overlapping elements. When two or more positioned elements overlap, the element with the higher z-index value appears on top. Understanding z-index is important for creating dropdown menus, popups, modals, tooltips, banners, and layered web layouts. In this chapter, you’ll practice the z-index property through simple solved questions that are easy for beginners to understand. CSS Z-Index practice questions with solutions help to understand the concepts.

Question 1: Place an Element Above Another

Problem Statement

Write CSS to display a <div> above another overlapping element.

CSS Code

div {
    position: relative;
    z-index: 2;
}

Output

The <div> appears above overlapping elements that have a lower z-index.

Explanation

  • z-index controls the stacking order.
  • A higher z-index value appears above a lower value.
  • z-index works only on positioned elements.

Question 2: Place an Element Behind Another

Problem Statement

Write CSS to place a <div> behind another overlapping element.

CSS Code

div {
    position: relative;
    z-index: 1;
}

Output

The <div> appears behind elements with a higher z-index.

Explanation

  • Lower z-index values appear below higher values.
  • The element must use a positioning property.
  • Stacking works only when elements overlap.

Question 3: Use z-index with Absolute Positioning

Problem Statement

Write CSS to place an absolutely positioned <div> above other overlapping elements.

CSS Code

div {
    position: absolute;
    z-index: 10;
}

Output

The absolutely positioned <div> appears on top of overlapping elements with lower z-index values.

Explanation

  • position: absolute; removes the element from the normal flow.
  • z-index: 10; places it above elements with smaller values.
  • This is commonly used for popups and floating elements.

Question 4: Use z-index with Fixed Positioning

Problem Statement

Write CSS to keep a fixed header above all page content.

CSS Code

header {
    position: fixed;
    top: 0;
    z-index: 100;
}

Output

The fixed header stays above the rest of the webpage while scrolling.

Explanation

  • position: fixed; keeps the header attached to the browser window.
  • z-index: 100; ensures it appears above other page elements.
  • This is commonly used for sticky headers.

Question 5: Use a Negative z-index

Problem Statement

Write CSS to place a background <div> behind other page elements.

CSS Code

div {
    position: relative;
    z-index: -1;
}

Output

The <div> appears behind other positioned elements.

Explanation

  • Negative z-index values move elements behind others.
  • This technique is often used for decorative backgrounds.
  • Make sure the element remains visible and accessible when using negative values.

Question 6: Overlap Two Images Using z-index

Problem Statement

Write CSS to display one image above another overlapping image.

CSS Code

.image-top {
    position: absolute;
    z-index: 2;
}

.image-bottom {
    position: absolute;
    z-index: 1;
}

Output

The .image-top image appears above the .image-bottom image.

Explanation

  • Both images use position: absolute;.
  • .image-top has a higher z-index, so it appears above.
  • This technique is commonly used for image galleries and banners.

Question 7: Display a Modal Above All Content

Problem Statement

Write CSS to keep a modal window above every other element on the page.

CSS Code

.modal {
    position: fixed;
    z-index: 1000;
}

Output

The modal appears above the rest of the webpage.

Explanation

  • position: fixed; keeps the modal attached to the browser window.
  • z-index: 1000; places it above most page elements.
  • This is a common approach for login forms, popups, and dialog boxes.

Question 8: Bring an Element to the Front on Hover

Problem Statement

Write CSS to move a card above other overlapping cards when the mouse pointer moves over it.

CSS Code

.card:hover {
    position: relative;
    z-index: 5;
}

Output

The hovered card appears above the surrounding cards.

Explanation

  • :hover applies styles when the mouse pointer is over the card.
  • position: relative; allows the use of z-index.
  • The higher z-index brings the card to the front.

Question 9: Create a Floating Notification Box

Problem Statement

Write CSS to create a notification box that stays above all page content in the top-right corner.

CSS Code

.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 999;
}

Output

The notification box remains visible in the top-right corner and stays above other elements.

Explanation

  • position: fixed; keeps the notification attached to the browser window.
  • top and right place it in the top-right corner.
  • z-index ensures it appears above other content.

Question 10: Create a Layered Card Design

Problem Statement

Write CSS to place one card above another using the z-index property.

CSS Code

.card-front {
    position: relative;
    z-index: 2;
}

.card-back {
    position: relative;
    z-index: 1;
}

Output

The .card-front element appears above the .card-back element.

Explanation

  • Both cards are positioned using position: relative;.
  • The card with the higher z-index appears on top.
  • Layered cards are commonly used in modern UI designs.

Key Takeaways

  • z-index controls the stacking order of overlapping elements.
  • z-index works only on positioned elements.
  • Higher z-index values appear above lower values.
  • Negative z-index values place elements behind others.
  • position: relative;, absolute;, fixed;, and sticky; can be used with z-index.
  • z-index is commonly used for modals, tooltips, notifications, and layered designs.

Frequently Asked Questions (FAQs)

1. What is the CSS z-index property?

The z-index property controls the stacking order of overlapping positioned elements.

2. Does z-index work without the position property?

No. In most cases, an element must use a positioning value such as relative, absolute, fixed, or sticky for z-index to work as expected.

3. Which element appears on top?

The element with the higher z-index value appears above the element with the lower value.

4. Can I use negative values with z-index?

Yes. Negative values place an element behind other positioned elements.

5. Where is z-index commonly used?

It is commonly used for:

  • Popups
  • Modals
  • Dropdown menus
  • Tooltips
  • Fixed headers
  • Floating notification boxes

6. What happens if two elements have the same z-index value?

If both elements have the same z-index, the element that appears later in the HTML document is usually displayed on top.

7. What CSS properties are commonly used with z-index?

The most common properties are:

  • position
  • top
  • right
  • bottom
  • left

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top