What is the purpose of the z-index and how is it used?

Answer 1

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky).

Read More :

https://www.w3schools.com/cssref/pr_pos_z-index.asp

Answer 2

<div style="height:100px;width:100px; background-color:red;position:absolute;z-index:3"></div>
<div style="height:100px;width:100px;background-color:blue;position:absolute;z-index:2"></div>

Try playing around with values for z-index

Answer 3

hello,Pranjal

The z-index helps specify the stack order of positioned elements that may overlap one another. The z-index default value is zero, and can take on either a positive or negative number.

An element with a higher z-index is always stacked above than a lower index.

Z-Index can take the following values:

Auto: Sets the stack order equal to its parents.
Number: Orders the stack order.
Initial: Sets this property to its default value (0).
Inherit: Inherits this property from its parent element.

i hope this will help to you

Answer 4

The purpose of z-index in make something more visible than others
for example if you want some elements to more visible than others in the div
You just play around with the z-index value

Giving what you want to more visible a positive number of z-index(z-index :1) and
what you want to be less visible a negative number of z-index(z-index :-1).

It can also work when you have something fixed but you don't want it to be hidden by
other elements or being under other elements on html body when scrolling so You will just
give a z-index number more positive than any other element contained with the html body.

just play around with values and will surely figure it out.