Understanding Z-Index Property in CSS

Reading time: 20 minutes | Coding time: 2 minutes

CSS uses position property to define location (height in z-axis) of HTML elements in a webpage. In this article, we will explore z-index property in depth. CSS Position can be defined using any of the following:

1. Absolute
2. Relative
3. Fixed
4. Static

Explore more about the different CSS position before going into Z Index

Z-Index Property

When HTML elements are positioned explicitly, they may overlap with each other.
The Z-index property is used to specify the Stack order of HTML elements.

The higher the value of the HTML element in the stack, the more forward is its position.
HTML elements can have either a positive stack or a negative stack.

Syntax

z-index: auto|number|initial|inherit;

Rule: An element with greater stack order is always in front of element with lower stack order.

Note: If two elements overlap with each other and z-index is not specified explicitly, then the element defined later in the HTML source code has higher stack order.

Note: Z-index only works on elements whose CSS position property has been defined.

The following values can be given for Z-index property:

• auto
• number
• initial
• inherit

1. auto:

This is the default value. It is equivalent to z-index not being specified. The earlier the HTML element is defined in the source code file, lower the stack order it has.

Example

<style>
    img
    {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: auto;
    }
    h1
    {
    z-index: auto;
    position: absolute;
    top: 220px;
    }
</style>
<img src="OpenGenus.jpg" alt="OpenGenus Logo">
<h1> This is overlap Heading over OpenGenus Logo </h1>

Output:

Here, a heading is overlapped with the image.

In the source code, <h1> element is defined after the <img> element. Thus <h1> has higher stack order than <img> element and is placed in front of <img> element.

2. number:

We can specify a numeric value for the stack order. If numbers specified are positive, positive element stack follows. If numbers specified are negative, negative element stack follows.

Example

<style>
    img
    {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
    }
    h1
    {
    z-index: 1;
    position: absolute;
    top: 220px;
    }
</style>
<img src="OpenGenus.jpg" alt="OpenGenus Logo">
<h1> This is overlap Heading over OpenGenus Logo </h1>

Output:

Here, a heading is overlapped with the image. Since the image has a lower z-index, it is behind the heading.

3. initial:

Initial keyword is used with JavaScript code to reset the z-index to initial settings if it has been modified.

Syntax:

document.getElementById("idvalue").style.zIndex=initial;

Example:

<style>
    img
    {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
    }
    h1
    {
    z-index: 1;
    position: absolute;
    top: 220px;
    }
    #b1
    {
    position:absolute;
    top:400px;
    }
</style>
<img src="OpenGenus.jpg" alt="OpenGenus Logo" id="img1">
<h1> Generic Heading </h1>
<button onclick="function1()"> Click here to Modify Z-index of Image </button>
<button onclick="function2()" id="b1"> Click here to Restore Defaults </button>
<script>
    function function1()
    {
    document.getElementById("img1").style.zIndex=2;
    }
    function function2()
    {
    document.getElementById("img1").style.zIndex = initial;
    }
</script>

Explanation:

• Initially, Image (having z-index of -1) has lower Z-index than heading (having z-index of +1) and thus Heading will appear in front of the image.
• When Button having function1() is clicked, it modifies the z-index of image from -1 to +2 which is higher than heading element and also the button element (which has default z-index = auto because no z-index was initially assigned) and thus the image will be infront of both the heading and first button,.
• When button having function2() is clicked, it restores the web-page with default settings. Thus, the image element will again have a z-index of -1 and the button 1 and heading will appear above it.

Output: Initial Webpage

Output: After changing Z-index of image using JavaScript

Output: Restore to default using Initial Keyword

4. inherit

Inherit keyword is used when a HTML element is enclosed in another HTML element.
The inherit keyword fetches the stack order of elements from parent elements.

Example:

<style>
    div
    {
    z-index:-1;
    }
    img
    {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index:inherit;
    }
    h1
    {
    z-index: 1;
    position: absolute;
    top: 220px;
    }
</style>
<div>
<img src="OpenGenus.jpg" alt="OpenGenus Logo">
</div>
<h1> Inherit Keyword Example for CSS Z-index property </h1>

Output:

Here,

• <div> element contains the <img> element.
• The inherit keyword fetches the z-index value from parent element <div> to <img>.