What is a Z-Index, how does it function?

z-index is used for specifying the vertical stacking of the overlapping elements that occur at the time of its positioning. It specifies the vertical stack order of the elements positioned that helps to define how the display of elements should happen in cases of overlapping.

The default value of this property is 0 and can be either positive or negative. Apart from 0, the values of the z-index can be:

• Auto: The stack order will be set equal to the parent.
• Number: The number can be positive or negative. It defines the stack order.
• Initial: The default value of 0 is set to the property.
• Inherit: The properties are inherited from the parent.

The element having a lesser value of z-index is stacked lower than the ones with a higher z-index.

From the above figure, we can see that as the value of the z-index increases along the z-axis, the order of stacking would be towards the top of other elements along the vertical axis.

Article ID: 1073
Created: Fri, Jun 3, 2022
Last Updated: Fri, Jun 3, 2022
Author: Administrator

Online URL: https://www.articlediary.com/article/what-is-a-z-index-how-does-it-function-1073.html