Z-index

Z-index is a CSS property used to control the stacking order of elements on a web page. It determines which elements appear on top when they overlap. Elements with a higher Z-index value are displayed above those with a lower value.

For example, if two elements overlap, the one with z-index: 2 will appear above the one with z-index: 1. By default, elements have a Z-index of 0.

Z-index only works on elements with a specified position property, like relative, absolute, or fixed. If an element is set to position: static, Z-index won’t apply.

This property is useful for creating layered designs, such as modals, dropdown menus, or sticky headers. For instance, a modal window might use a Z-index of 1000 to ensure it appears above all other content.

Using Z-index effectively requires keeping track of values to avoid conflicts. Assigning excessively high values, like 99999, can lead to confusion and design issues.