What is the purpose of Z index How it is used?

The z-index is a CSS property that allows you to control the stack order of specific elements. An element with a higher z-index is always in front of an element with a lower z-index.

Here's how it's used:

1. Identify the elements that you want to control the stack order of. These elements must be positioned (i.e., their position property is set to relative, absolute, fixed, or sticky).

2. Apply the z-index property to these elements. The value of the z-index property is an integer, and it can be positive, negative, or zero. The default value is auto, which corresponds to 0 where no z-index is specified.

3. The element with the highest z-index will appear on top. If two elements have the same z-index, the one that comes last in the HTML will appear on top.

Here's an example:

.element1 {
  position: absolute;
  z-index: 1;
}

.element2 {
  position: absolute;
  z-index: 2;
}

In this example, element2 will appear on top of element1 because it has a higher z-index.