Z-Index in CSS: What it Is and What it Does

z-index is a CSS Property that specifies the stack order of an element (which element should be placed in front of or behind)

The Z-index min & max range is ±2147483647

Note: This Z-index will work only with Position elements.

1. position: relative

2. position: absolute

3. position: fixed

Syntax:- the z-index property specified either the keyword auto or <integer>

 Keyword value 
z-index: auto;

 [<integer> values]
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; (Negative values to lower the priority) 

[Global values]
z-index: inherit;
z-index: initial;
z-index: revert;
z-index: revert-layer;
z-index: unset;

without using Z-index & position: absolute:

With using Z-index:

As we can observe in the below example, the Z-index property whose value is highest it should be displayed in Ui.

In the above code, the z-index values are( 0, 1). Here 1 value having z-index property completely overlapped. which means Z-index whose value is highest it should be displayed in Ui.

Example3:

In the above code,the Z-index value is (5,10), and the z-index property is it must be a higher value. The z-index value is 10, it should be displayed in black colour.

position: relative

The relative property, it should be overlapped by the Absolute property.

position: fixed:

The fixed positioning property helps to put the text fixed on the browser. This fixed test is positioned relative to the browser window, and doesn't move even you scroll the window.