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

The property 'z-index' in CSS specifically controls the stacking order of overlapping elements. When you have multiple elements that occupy the same space on a webpage—like images, divs, or any positioned elements—'z-index' determines which element appears on top of another. This is particularly useful when you want to create layers of content, such as dropdown menus or modal dialogs, where certain elements should be visually elevated above others.

For 'z-index' to take effect, the elements involved must have a position property set to something other than the default (which is static), such as 'relative', 'absolute', or 'fixed'. This allows the browser to understand how to layer the elements according to their specified z-index values. Elements with a higher z-index value will be displayed on top of those with a lower value.

Understanding 'z-index' is crucial for managing layout and visual hierarchy on a webpage effectively.