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:

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