Z-Index Basics

Part of the Styling with CSS section of Coddy's HTML journey — lesson 59 of 76.

In CSS, the z-index property controls the stacking order of positioned elements (elements with a position other than static). When elements overlap, the z-index determines which element appears on top and which appears behind. Elements with a higher z-index value are stacked in front of elements with a lower value.

Here's the basic syntax for using the z-index property:

selector {
    position: relative; /* or absolute, fixed, or sticky */
    z-index: value;
}

position: relative; (or absolute, fixed, or sticky): The element must be positioned for z-index to have an effect.

value: An integer value that represents the stacking order. Elements with higher values are stacked in front of elements with lower values. The value can be positive, negative, or zero.

For example:

.box1 {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 2;
}

.box2 {
    position: absolute;
    top: 70px;
    left: 70px;
    z-index: 1;
}

In this example, both .box1 and .box2 are positioned absolutely. Because .box1 has a higher z-index value, it will be stacked in front of .box2 when they overlap.

Challenge

Easy

You are given an HTML document with three overlapping divisions (<div>) with the classes box1, box2, and box3. Your task is to use the z-index property to control the stacking order of these elements. Follow the steps below:

Write a CSS rule that targets the <div> element with the class box1. Set its position property to absolute, top to 0, left to 0, and z-index to 3.
Write a CSS rule that targets the <div> element with the class box2. Set its position property to absolute, top to 20px, left to 20px, and z-index to 2.
Write a CSS rule that targets the <div> element with the class box3. Set its position property to absolute, top to 40px, left to 40px, and z-index to 1.

Observe how the z-index values affect the stacking order of the boxes, with box1 on top and box3 at the bottom.

Cheat sheet

The z-index property controls the stacking order of positioned elements. Elements with higher z-index values appear in front of elements with lower values.

Basic syntax:

selector {
    position: relative; /* or absolute, fixed, or sticky */
    z-index: value;
}

Requirements:

Element must have a position other than static
Value can be positive, negative, or zero
Higher values stack in front of lower values

Example:

.box1 {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 2;
}

.box2 {
    position: absolute;
    top: 70px;
    left: 70px;
    z-index: 1;
}

Try it yourself

<html>
<head>
    <title>Z-Index Basics</title>
    <style>
        .box1 {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .box2 {
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: lightgreen;
        }
        .box3 {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: lightcoral;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="box1">Box 1</div>
    <div class="box2">Box 2</div>
    <div class="box3">Box 3</div>
</body>
</html>