What does the z-index property in CSS control?

The z-index property in CSS is used to control the vertical stacking order of overlapping elements on a web page. When elements overlap, the z-index determines which element appears on top of another. A higher z-index value means that the element will be positioned above those with a lower z-index value. This property is particularly useful in scenarios where elements need to be layered, such as modals, dropdowns, and image galleries.

For an element to utilize z-index, it must have a position value other than the default static, which means it must be set to relative, absolute, sticky, or fixed. By managing the z-index of various elements, a web designer can create visually appealing layouts and ensure user interface components function as intended.

In contrast, the width, responsiveness, and font size of elements are managed by different CSS properties such as width, max-width, and font-size, not by the z-index.