# 
## Overview

In CSS, the **`z-index` property** specifies how elements stack on each other. 

When elements overlap, the element with a larger `z-index` covers those with a smaller one.

> Note: The `z-index` is usually useful with the `position` property (other than `position`).

# 
#  Syntax

The `z-index` property is specified like the other CSS properties. We specify the property and its value.
```
property: value
```


# 
#  Keyword value


     z-index:auto;

We use the keyword value to set the context to `0`. The box doesn't establish a new local stacking context.

##
## Using an integer 

     z-index: 0;
     z-index: 5;
     z-index: 139;
     z-index: -3;

The element with a larger value covers those with smaller values.

##
## Global values

    z-index: inherit;
    z-index: initial;
    z-index: revert;
    z-index: unset;

The global values function is the same for every CSS property.


<html>
 <head>
 </head>
 <body>
   <div class="container">
  <div class="red-box">Red box</div>
  <div class="black-box">Black box</div>
</div>

 </body>
</html>

.container{
    position: relative;
}
.red-box{
    position: absolute;
    top: 5px;
    left: 20px;
    background-color: red;
    width: 40%;
    height: 100px;
    z-index: 2;
}
.black-box{
    position: absolute;
    top: 7px;
    left: 25px;
    background-color: black;
    width: 50px;
    height: 120px;
    z-index: 5; /* This puts .black-box above .red-box */
}
.expl{
    position: absolute;
    top: 135px;
}

codemirror

# 
## Explanation

In the HTML section:
* **Lines 5-7**: We create two boxes with classes, <code>red-box</code> and<code> black-box </code>.

In the CSS section:

* **Lines 4-12**: These contain the CSS properties of the `red-box`.

* **Lines 5-7**: `red-box` gets its position properties.

* **Lines 8-10**: We set the color, width, and height of `red-box`.


* **Line 11**: A `z-index` property is set for `red-box`. This defines whether the box will be placed above or below any other element that is in the same position.

    
* **Lines 13–21**: Contains the CSS properties of `black box`.
    

* **Lines 14–16**: The `black-box` gets its position properties.


* **Lines 17–19**: We set the color, width, and height of `black-box`.


* **Line 20**: A `z-index` property is set for the black box. This places the `black-box` on the `red-box` because the value of the `z-index` is higher.



What is the z-index property in CSS?

Overview

Syntax

Keyword value

Using an integer

Global values

Explanation