Z-Index

Z-index is a UX4G property that helps regulate layout by offering a third axis to arrange content, and it is used by a number of UX4G components. In UX4G, there is a use of standard z-index scale that is intended to stack navigation, tooltips and popovers, modals, and other elements correctly.

These higher values begin at a randomly chosen value that is high and precise enough to ideally prevent disagreements. To be somewhat consistent in the behaviors, there is a requirement of uniform set of these across all of the layered components, including tooltips, popovers, navbars, dropdowns, and modals.

$zindex-dropdown:                   1000;
$zindex-sticky:                     1020;
$zindex-fixed:                      1030;
$zindex-offcanvas-backdrop:         1040;
$zindex-offcanvas:                  1045;
$zindex-modal-backdrop:             1050;
$zindex-modal:                      1055;
$zindex-popover:                    1070;
$zindex-tooltip:                    1080;
$zindex-toast:                      1090;

Employ low single digit z-index values of 1, 2, and 3 for default, hover, and active states to accommodate overlapping boundaries inside components (for example, buttons and inputs in input groups). Bring a certain element to the front with a higher z-index value to reveal their border over the sibling components when it is hovered over, focused, or active.