What does the 'z-index' property in CSS control?

The 'z-index' property in CSS specifically controls the layering of elements on the webpage. It determines the stack order of elements that overlap. When multiple elements occupy the same space, the 'z-index' value specifies which element appears on top of another. Higher values indicate that the element should be rendered above elements with lower values.

For example, if you have two div elements that overlap, one with a 'z-index' of 1 and another with a 'z-index' of 2, the element with a 'z-index' of 2 will be displayed on top of the one with a 'z-index' of 1. This property is particularly useful in scenarios where elements overlap—like images, modals, or tooltips—allowing for better control over user interface design and ensuring that users can interact with the appropriate elements as intended.

The other options relate to different styles and behaviors: thickness refers to an element's dimensions, opacity pertains to transparency, and visibility is about whether an element can be seen or not. None of these aspects are controlled by 'z-index', solidifying the choice that the 'z-index' property pertains to element layering.