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.