CSS Interview Questions

28 Questions
HTML & CSS

HTML & CSS

Web DevelopmentFrontend

Question 14

What is the purpose of the z-index property, and how does it work?

Answer:

Purpose of the z-index Property

The z-index property in CSS is used to control the stacking order of elements that overlap. It determines which element appears in front of or behind other elements when they occupy the same space on the page. The z-index property only works on elements that have a position value other than static (i.e., relative, absolute, fixed, or sticky).

How z-index Works

  1. Stacking Context:

    • Elements on a web page are rendered in a stacking context, which is a three-dimensional conceptualization of how elements are layered on top of one another along the z-axis (which is perpendicular to the screen).
    • Each stacking context is independent of other stacking contexts. Changes to z-index within one stacking context do not affect elements in a different stacking context.

  2. The z-index Value:

    • The z-index property accepts integer values (both positive and negative) and determines the stacking order of elements within the same stacking context.
    • Elements with a higher z-index value are positioned in front of elements with a lower z-index value.
    • If two elements have the same z-index value, their stacking order is determined by their order in the HTML document; elements that appear later in the document are stacked on top.

  3. Default Stacking Order:

    • By default, elements with no z-index specified (or with z-index: auto) are stacked in the order they appear in the DOM, with later elements appearing on top.

Example of z-index in Action

Here’s a simple example demonstrating how z-index works:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .box {
            position: absolute;
            width: 100px;
            height: 100px;
            color: white;
            text-align: center;
            line-height: 100px;
        }

        .box1 {
            background-color: red;
            top: 50px;
            left: 50px;
            z-index: 1; /* This box will be behind box2 and box3 */
        }

        .box2 {
            background-color: green;
            top: 100px;
            left: 100px;
            z-index: 2; /* This box will be between box1 and box3 */
        }

        .box3 {
            background-color: blue;
            top: 150px;
            left: 150px;
            z-index: 3; /* This box will be on top of box1 and box2 */
        }
    </style>
    <title>Z-Index Example</title>
</head>
<body>
    <div class="box box1">Box 1</div>
    <div class="box box2">Box 2</div>
    <div class="box box3">Box 3</div>
</body>
</html>

Explanation:

  • Box 1 (z-index: 1): Positioned at the lowest stacking level, this box will appear behind Box 2 and Box 3.
  • Box 2 (z-index: 2): Positioned between Box 1 and Box 3, this box will overlap Box 1 but be behind Box 3.
  • Box 3 (z-index: 3): Positioned at the highest stacking level, this box will appear in front of both Box 1 and Box 2.

Important Points About z-index:

  1. Positioned Elements: The z-index property only works on elements that are positioned (position: relative, absolute, fixed, or sticky). If an element has position: static, z-index has no effect.

  2. Stacking Contexts: A new stacking context is created whenever an element has a position value other than static and a z-index value other than auto. Stacking contexts can also be created by other properties, such as opacity less than 1, transform, filter, perspective, clip-path, etc.

  3. z-index and Negative Values: Negative z-index values are allowed, which will place an element behind other elements with a z-index of 0 or greater. An element with a negative z-index can still be visible if no other elements cover it.

  4. Inheritance: The z-index value is not inherited by child elements. Child elements are positioned within the stacking context of their nearest positioned ancestor.

Summary

  • The z-index property controls the vertical stacking order of elements on a web page.
  • Elements with a higher z-index value appear in front of elements with a lower z-index value within the same stacking context.
  • The z-index property only affects elements that are positioned (relative, absolute, fixed, or sticky).
  • Understanding z-index and stacking contexts is crucial for managing the layering of overlapping elements, especially in complex layouts.

Recent job openings