Z-Index

Echelle de z-index et couches d'elevation. Une echelle coherente evite les conflits de superposition et garantit que chaque couche d'interface s'empile correctement.

Principe

Speedcube Master utilise les classes utilitaires Tailwind z-* avec une echelle fixe par increments de 10. Cela permet d'inserer de nouvelles couches si necessaire sans casser l'existant. La seule exception est z-[100] pour les toasts Sonner, qui doivent toujours etre au premier plan.

Echelle de z-index

Tous les niveaux utilises dans l'application, du plus bas au plus eleve.

Classe Tailwind	Valeur	Usage	Description
`z-0`	0	Contenu de base	Flux normal du document, textes, images, conteneurs standards.
`z-10`	10	Elements eleves	Cards au hover, dropdowns ouverts, popovers.
`z-20`	20	Sticky elements	Table des matieres, sous-headers colles, barres d'outils.
`z-30`	30	Overlays et backdrops	Fond semi-transparent derriere les modales et sheets.
`z-40`	40	Sidebar navigation	Panneau de navigation lateral mobile.
`z-50`	50	Header fixe, modales	Navigation principale, dialogs, sheets, command palette.
`z-[100]`	100	Toasts (Sonner)	Notifications toast toujours au-dessus de tout le reste.

Visualisation empilee

Representation visuelle de l'empilement des couches.

z-0Contenu de base

z-10Elements eleves

z-20Sticky elements

z-30Overlays et backdrops

z-40Sidebar navigation

z-50Header fixe, modales

z-[100]Toasts (Sonner)

100

Conventions

DOToujours utiliser les classes Tailwind z-0, z-10, z-50, etc.
DOUtiliser z-[100] uniquement pour les toasts Sonner.
DOCreer un nouveau contexte d'empilement avec relative ou isolate pour isoler les z-index locaux.
DON'TNe jamais hardcoder un z-index dans le style inline : style={{ zIndex: 9999 }}
DON'TNe pas utiliser de valeurs arbitraires en dehors de l'echelle definie (z-[5], z-[25], z-[999]).

Exemples de code

Utilisation des z-index dans des cas concrets de l'application.

// Header fixe — z-50
<header className="fixed top-0 inset-x-0 z-50 bg-background/80 backdrop-blur-md border-b border-border">
  <nav className="max-w-6xl mx-auto px-4 h-16 flex items-center">
    {/* ... */}
  </nav>
</header>

// Overlay de modale — z-30 pour le backdrop, z-50 pour le contenu
<Dialog>
  <DialogOverlay className="fixed inset-0 z-30 bg-black/60" />
  <DialogContent className="fixed z-50 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
    {/* ... */}
  </DialogContent>
</Dialog>

// Sidebar mobile — z-40
<Sheet>
  <SheetContent className="z-40 w-72">
    <nav className="space-y-2">
      {/* ... */}
    </nav>
  </SheetContent>
</Sheet>

// Sticky table of contents — z-20
<aside className="sticky top-20 z-20 hidden lg:block">
  <TableOfContents items={headings} />
</aside>

// Dropdown menu — z-10
<DropdownMenuContent className="z-10 min-w-[180px]">
  {/* ... */}
</DropdownMenuContent>

// Toasts Sonner — z-[100] (configure dans le provider)
<Toaster
  position="bottom-right"
  toastOptions={{
    className: "z-[100]",
  }}
/>

Classe Tailwind

Valeur

Usage

z-0

Contenu de base

z-10

Elements eleves

z-20

Sticky elements

z-30

Overlays et backdrops

z-40

Sidebar navigation

z-50

Header fixe, modales

z-[100]

100

Toasts (Sonner)

Conventions

DOToujours utiliser les classes Tailwind z-0, z-10, z-50, etc.
DOUtiliser z-[100] uniquement pour les toasts Sonner.
DOCreer un nouveau contexte d'empilement avec relative ou isolate pour isoler les z-index locaux.
DON'TNe jamais hardcoder un z-index dans le style inline : style={{ zIndex: 9999 }}
DON'TNe pas utiliser de valeurs arbitraires en dehors de l'echelle definie (z-[5], z-[25], z-[999]).

Exemples de code

Utilisation des z-index dans des cas concrets de l'application.

// Header fixe — z-50
<header className="fixed top-0 inset-x-0 z-50 bg-background/80 backdrop-blur-md border-b border-border">
  <nav className="max-w-6xl mx-auto px-4 h-16 flex items-center">
    {/* ... */}
  </nav>
</header>

// Overlay de modale — z-30 pour le backdrop, z-50 pour le contenu
<Dialog>
  <DialogOverlay className="fixed inset-0 z-30 bg-black/60" />
  <DialogContent className="fixed z-50 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
    {/* ... */}
  </DialogContent>
</Dialog>

// Sidebar mobile — z-40
<Sheet>
  <SheetContent className="z-40 w-72">
    <nav className="space-y-2">
      {/* ... */}
    </nav>
  </SheetContent>
</Sheet>

// Sticky table of contents — z-20
<aside className="sticky top-20 z-20 hidden lg:block">
  <TableOfContents items={headings} />
</aside>

// Dropdown menu — z-10
<DropdownMenuContent className="z-10 min-w-[180px]">
  {/* ... */}
</DropdownMenuContent>

// Toasts Sonner — z-[100] (configure dans le provider)
<Toaster
  position="bottom-right"
  toastOptions={{
    className: "z-[100]",
  }}
/>