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

Answer

The z-index helps to 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.

 Use Z Index if you need to put a background element below a container. You can easily place the background under every element by giving it a negative Z Index 

#background {
  z-index: -1;
}