In CSS, what does the z-index property control?

The z-index property in CSS is specifically designed to control the stacking order of positioned elements. When elements are positioned using properties such as relative, absolute, or fixed, they can overlap each other. The z-index determines which elements appear on top or behind others by assigning a numeric value to each element.

Elements with a higher z-index value will be placed in front of those with a lower value. This is particularly useful in scenarios involving modal windows, tooltips, or any layout where layered elements are present. If two elements have the same z-index, their stacking order is determined by their order in the HTML document.

The other options are not related to the functionality of z-index. For example, controlling the width of an element relates to properties like width or max-width, hover effects are managed with pseudo-classes like :hover, and color opacity is handled using properties such as opacity or rgba for colors. Therefore, the correct answer clearly identifies the unique role of z-index in managing the visual arrangement of elements on a webpage.