Z Index

Z-index er en CSS-egenskap som styrer stablingsrekkefølgen til elementer på en nettside. Med z-index kan du bestemme hvilke elementer som skal ligge over eller under andre, spesielt når de overlapper hverandre. For å sikre konsistens og forutsigbarhet i designet, har vi definert en rekke z-index tokens som dekker vanlige brukstilfeller i SpareBank 1 sitt designsystem.

Hver token representerer en CSS custom property, som gjør det enkelt å bruke og vedlikeholde z-index-verdier på tvers av prosjekter. Tokenene er navngitt etter formålet de skal dekke, og verdiene er nøye valgt for å unngå konflikter mellom ulike komponenter og overlays.

Ved å bruke disse tokenene sikrer du at grensesnittet oppfører seg konsistent, og at viktige elementer alltid vises i riktig rekkefølge.

CSS custom property	Verdi	Beskrivelse
--ix-z-background	-1	Bakgrunnselementer som alltid skal ligge bak alt annet.
--ix-z-default	0	Standard z-index for vanlige komponenter og innhold.
--ix-z-elevated	1	Brukes for elementer som skal ligge over standard innhold.
--ix-z-overlay	20	Overlay som skal ligge over innholdet på siden.
--ix-z-dialog	60	Dialoger som skal ligge over alt annet.
--ix-z-max	100	For når du har noe som må ligge øverst uansett hva. Vi annbefaler å bruke denne like mye som !important. Dvs. aldri.