The z-index property in CSS is used to control the vertical stacking order of an element on the page.
z-index only affects positioned elements (i.e., elements with a position property value of relative, absolute, fixed, or sticky).
The value of z-index is an integer, which can be positive, negative, or zero.
-
Minimum value: The minimum value of z-index is theoretically negative infinity, but in practice it is constrained by browser limitations. In practical applications, negative values such as -1, -10, or -100 are commonly used to place elements at a lower stacking level.
-
Maximum value: Theoretically, the maximum value is positive infinity, but in practice it is constrained by browser limitations. In most modern browsers, the maximum value is typically 2147483647 (which is the largest positive integer representable by a 32-bit integer).
For example, if you have a modal dialog, you might assign a very high z-index value, such as 1000, to ensure it overlays other page content. Conversely, if you want an element to be displayed below most other elements, you might assign it a negative z-index value.
It is important to note that z-index is relative; it is compared only with other elements within the same stacking context. Creating a new stacking context affects the behavior of z-index, for example, by setting opacity to less than 1 or applying transform.