What is a Z index in CSS? and how is it used?

The z-index property in CSS is used to define the stack order of HTML elements. Stack order is the order in which an element is arranged above or below another element.

For example, when you go to eat someone’s wedding party, the plates placed there are in stack order (one above the other). If numbers are written on these plates and they are placed again, then each plate represents a stack order (number).

What is a Z index in CSS?

CSS provides you the z-index property to set the z-index of web elements. With the z-index property of CSS, you can arrange HTML elements in stack order. In simple words, you can decide which element will show above or below which element.

If we give the value ‘auto’ of z-index then the stack order of the element is decided by the browser and this order is in the order in which the element is placed. The first element will have the lowest z-index and the last element will have the highest z-index.

Also Read: Is CSS a programming language

For example, suppose you have created 3 div elements. Whose colors are red, green, and blue respectively. If you want red color div to show at the bottom and green color div show above it and blue color div show above it then you will give them 1, 2, and 3 z-index numbers respectively.

The z-index property is used to define the stack order of HTML elements. Stack order means whether an element will appear above or below another element. The element whose z-index is higher is shown above. we understand it from this picture.

How to used Z index in CSS?

z-index: value;

Often the value of the z-index is given as an integer number, but its value ‘auto’ can also be given. If we give the value ‘auto’ of z-index, then the stack order of the element is decided by the browser and the order is in the order in which the element is placed. The first element will have the lowest z-index and the last element will have the highest z-index.

Also Read: How to link CSS to HTML with 3 methods?

Different Type of z-index-style Property Values

There are many values of the z-index property available to control the stack order of elements. These are being told below.

• auto – This is the default order of the elements. In this Situation, the Browser decides the Stack Order.
• Number – This is any Integer Number. Which depends on the number of your overlap elements.
• initial – Default order is decided by this value.
• Inherit – In this value the order is decided from the parent element.

{z-index: auto | integer-number | initial | inherit;}

Below we are defining 3 Div. In which we have shown DIV1 in 2 numbers. Div1 is shown on the 3rd number. And Div3 is shown at number one.

Also, Read More CSS Tutorials:-

Also Read: How to add a background image in CSS?

• CSS Tutorial
• What Is CSS Explain It? And CSS Example? | Types Of CSS?