Skip to content
Related Articles

Related Articles

CSS | z-index Property

Improve Article
Save Article
  • Last Updated : 04 Aug, 2022
Improve Article
Save Article

The z-index property is used to displace elements on the z-axis i.e in or out of the screen. It is used to define the order of elements if they overlap on each other. 

Syntax:

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

Property values:

  • auto: The stack order is equal to that of the parent(default).
  • number: The stack order depends in the number.
  • initial: Sets the property to its default value.
  • inherit: Inherits the property from the parent element.

Example 1: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
         z-index Property
    </title>
    <style>
        img {
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: -1;
        }
         
        h1,
        p {
            background-color: green;
        }
    </style>
</head>
 
<body>
 
    <h1>GeeksforGeeks</h1>
    <img src=
         width="400" height="150">
    <p>This example shows the use of z-index property.</p>
</body>
 
</html>


Output: 

Example 2: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
         z-index Property
    </title>
    <style>
        img {
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: +1;
        }
         
        h1,
        p {
            background-color: green;
        }
    </style>
</head>
 
<body>
 
    <h1>GeeksforGeeks</h1>
    <img src=
         width="400" height="150">
    <p>This example shows the use of z-index property.</p>
</body>
 
</html>


Output: 

In the Example-1 the z-index is set to -1 therefore, the image appears behind the text but in Example-2 when the z-index is set to +1 the image hides the text. 

Supported Browsers: The browser supported by z-index property are listed below:

  • Google Chrome 1.0
  • Edge 12.0
  • Internet Explorer 4.0
  • Firefox 1.0
  • Opera 4.0
  • Apple Safari 1.0

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!