Reshaped defines three z-index tokens that describe how far an element is lifted off the page along the stacking axis. Using them instead of raw numbers keeps layering predictable, so components built in isolation still stack correctly once they're combined in a product. Each token leaves a wide gap to the next one, which gives you room to nudge individual elements with calc() without crossing into the next layer.
--rs-z-index-relative /* 10 */ --rs-z-index-absolute /* 100 */ --rs-z-index-fixed /* 200 */ /* Usage */ .element { z-index: var(--rs-z-index-relative); }
--rs-z-index-relative is used to reorder elements within the same component without taking them out of the layout flow. It covers cases like a focused control that needs to render its outline above neighbouring elements, or a sticky cell that stays above the rest of the table while scrolling.
--rs-z-index-absolute is used by floating elements that are positioned next to an anchor but should render above the regular page content. For example, it's applied by Flyout, which powers Popover, Tooltip and DropdownMenu.
--rs-z-index-fixed is used by full-screen layers that must sit above everything else on the page. It's applied by Overlay, which powers Modal. Toast renders one level higher with calc(var(--rs-z-index-fixed) + 1) so notifications stay visible even when a modal is open.