Related Articles

Related Articles

CSS | z-index Property
  • Last Updated : 09 Aug, 2019

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:



Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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
  • Firefox 1.0
  • Opera 4.0
  • Apple Safari 1.0



My Personal Notes arrow_drop_up
Recommended Articles
Page :