Mise en page

Z-index

Le z-index décide quel élément passe devant les autres quand ils se superposent. Cauri fixe une échelle pour ses composants flottants, et propose cinq utilitaires pour vos propres éléments.

Le z-index ne s’applique qu’aux éléments positionnés (position: relative, absolute, fixed ou sticky) et aux enfants directs d’un conteneur flex ou grille. Sans position, la propriété est ignorée.

Les composants de Cauri (menus, barres collantes, fenêtres modales, infobulles) utilisent des valeurs élevées et espacées pour rester au-dessus du reste de la page sans conflit. Les utilitaires z-* couvrent le contenu ordinaire, avec des valeurs basses.

Utilitaires z-index#

Les quatre cartes se chevauchent. Le z-index le plus élevé est devant : z-3 passe sur z-2, qui passe sur z-1, et ainsi de suite. .z-n1 (−1) place un élément derrière son parent, et .z-0 remet la valeur à zéro.

z-3

z-2

z-1

z-0

<div class="position-relative" style="height: 9rem;">
  <div class="z-3 position-absolute p-3 text-bg-primary" style="top: 0; left: 0; width: 12rem;">z-3</div>
  <div class="z-2 position-absolute p-3 text-bg-success" style="top: 1.5rem; left: 2rem; width: 12rem;">z-2</div>
  <div class="z-1 position-absolute p-3 text-bg-info" style="top: 3rem; left: 4rem; width: 12rem;">z-1</div>
  <div class="z-0 position-absolute p-3 text-bg-dark" style="top: 4.5rem; left: 6rem; width: 12rem;">z-0</div>
</div>

Utilitaires disponibles

Utilitaires disponibles
Classe	Valeur	Usage
`.z-n1`	-1	Place l’élément derrière son parent ou ses voisins.
`.z-0`	0	Rétablit le niveau de base.
`.z-1`	1	Premier niveau au-dessus du contenu.
`.z-2`	2	Deuxième niveau.
`.z-3`	3	Troisième niveau.

Échelle des composants

Valeurs par défaut des variables Sass. Un composant plus bas dans la liste passe devant ceux qui le précèdent.

Échelle des composants
Variable Sass	Valeur	Composant
`$zindex-dropdown`	1000	Menus déroulants (Menus déroulants).
`$zindex-sticky`	1020	Éléments collants, comme `.sticky-top`.
`$zindex-fixed`	1030	Éléments fixes, comme `.fixed-top` et `.fixed-bottom`.
`$zindex-offcanvas-backdrop`	1040	Fond assombri derrière un panneau latéral.
`$zindex-offcanvas`	1045	Panneau latéral (Offcanvas).
`$zindex-modal-backdrop`	1050	Fond assombri derrière une fenêtre modale.
`$zindex-modal`	1055	Fenêtre modale (Modale).
`$zindex-popover`	1070	Popovers (Popovers).
`$zindex-tooltip`	1080	Infobulles (Infobulles).
`$zindex-toast`	1090	Notifications (Toasts).
`$stretched-link-z-index`	1	Zone cliquable étendue d’un lien (Lien étendu).

Modifier l'échelle en Sass#

Les variables sont définies avec !default : redéfinissez-les avant l’import de Cauri. La liste $zindex-levels pilote les utilitaires .z-* ; ajoutez-y une entrée pour créer de nouvelles classes.

// Place les barres collantes au-dessus des menus
$zindex-sticky: 1100;

// Génère aussi .z-4
$zindex-levels: (
  n1: -1,
  0: 0,
  1: 1,
  2: 2,
  3: 3,
  4: 4
);

@import "cauri";

Bonnes pratiques

À faire

Utilisez les valeurs 0 à 3 des utilitaires pour le contenu de la page, et gardez les valeurs élevées pour les composants.
Ajoutez position-relative à l’élément avant d’ajouter z-*.
Vérifiez d’abord le contexte d’empilement parent quand une valeur élevée ne passe pas devant : un parent avec transform, opacity ou position et un z-index crée un contexte isolé.

À éviter

N’inventez pas de z-index énormes (9999) : ils cachent les modales et les infobulles de Cauri.
Ne comptez pas sur le z-index pour un élément sans position.

Accessibilité

Un élément qui en recouvre un autre ne doit pas masquer un contrôle actif : vérifiez que le focus reste visible et que rien n’empêche de cliquer.