Names the stacking order two things overlapping the page are settled by, so a widget states which kind of thing it
is rather than inventing a number and discovering later which other widget it lost to.
Remarks
Order — from the page upwards: zIndexSticky, zIndexDropdown, zIndexBlanket, zIndexModal, zIndexToast,
zIndexTooltip. A tooltip sits at the top because it explains whatever is below it, and a toast below that because
it is dismissible while a tooltip is not.
Stacking contexts — a value is compared only against its siblings in the same stacking context, so a dropdown
opened inside a modal takes zIndexDropdown and still paints above the modal, whose own value applies in the
context enclosing it. A widget therefore never adds a step to clear an ancestor.
Steps — spaced by a hundred, leaving an app room to slot a thing between two without restating the ladder.
Layering tokens.
Names the stacking order two things overlapping the page are settled by, so a widget states which kind of thing it is rather than inventing a number and discovering later which other widget it lost to.
Remarks
Order — from the page upwards:
zIndexSticky,zIndexDropdown,zIndexBlanket,zIndexModal,zIndexToast,zIndexTooltip. A tooltip sits at the top because it explains whatever is below it, and a toast below that because it is dismissible while a tooltip is not.Stacking contexts — a value is compared only against its siblings in the same stacking context, so a dropdown opened inside a modal takes
zIndexDropdownand still paints above the modal, whose own value applies in the context enclosing it. A widget therefore never adds a step to clear an ancestor.Steps — spaced by a hundred, leaving an app room to slot a thing between two without restating the ladder.