Skip to content

CSS: stacking

.--stack-topmost — z-index depth utilities — .--stack-<level> (deepest, below, above, topmost) — usable bare or chained onto any component, so layers stack predictably instead of by hand-tuned numbers.

Source: index.ts

Usage

css
@import "@pantoken/components/utilities.css";

Examples

html
<div class="--stack-topmost">Always on top.</div>

Modifiers

ModifierDescription
.--stack-aboveAbove the default flow.
.--stack-belowBelow the default flow.
.--stack-deepestThe lowest stacking depth.
.--stack-topmostThe highest stacking depth (overlays, menus).

Tokens consumed

TokenTypeValue
--instui-component-view-stacking-above<integer>1
--instui-component-view-stacking-below<integer>-1
--instui-component-view-stacking-deepest<integer>-9999
--instui-component-view-stacking-topmost<integer>9999