Z-Index

Les composants et leurs différents niveaux de superposition

Utilisation des z-index dans votre code

Utilisez la fonction Sass zindex(String $key) pour récupérer le niveau de z-index souhaité. Les clés disponibles pour les éléments sont les suivantes : dropdown, sticky, fixed, modal, popover, tooltip.

Exemple

z-index: zindex('modal');

Résultat

z-index: 8000;

Superposition libre des éléments

Dans le cas où vous auriez besoin d'une "simple" superposition pour vos éléments, on retrouve les mots-clés bien connus de Trilogy : tiny, small, medium et large

Exemple

z-index: zindex('tiny');

z-index: zindex('small');

z-index: zindex('medium');

z-index: zindex('large');

Résultat

z-index: 1;

z-index: 10;

z-index: 100;

z-index: 1000;

Superposition libre des éléments : cas spécifiques

Il peut arriver que vous ayez besoin d'un z-index de 0 voire négatif. Ce cas est aussi géré.

Exemple

z-index: zindex('void');

z-index: zindex('subzero');

Résultat

z-index: 0;

z-index: -1;