CSS Question
What is a z-index, how does it function?

Question

CSS Question

What is a z-index, how does it function?

Accepted Answer

z-index is a CSS property that controls the stacking order of elements on a webpage.

z-index is used to specify the order in which elements are displayed on top of each other.
Higher z-index values bring elements to the front, while lower values push them to the back.
Elements with a higher z-index will overlap elements with a lower z-index.
z-index only works on positioned elements (position: absolute, position: relative, or position: fixed).

Accepted Answer

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:

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

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

Top JPMorgan Chase & Co. Full Stack Developer interview questions & answers

Popular interview questions of Full Stack Developer