Comment créer un nouveau contexte d’empilement avec la propriété Isolation en CSS

Qu’est-ce que la propriété d’isolation CSS ?

En CSS, vous pouvez utiliser la propriété d’isolation pour créer un nouveau contexte d’empilement. Voici à quoi cela ressemble :

.container-for-new-stacking-context {
  isolation : isoler ;
}

La valeur par défaut de l’isolation est auto, ce qui est un peu plus nuancé car un contexte d’empilement peut être créé – mais cela dépend des propriétés de l’élément et si elles le nécessitent.

Vous pouvez également définir la valeur comme suit : inherit, initial, revert, ou unset.

L’utilisation de l’isolation : isolate ; est un moyen définitif de créer un nouveau contexte d’empilement.

Qu’est-ce que le contexte d’empilement ?

doll-g9145bb1e2_1280

En CSS, le contexte d’empilement permet littéralement d’empiler des éléments HTML dont la position de départ est basée sur un élément de base qui fournit le contexte.

Les éléments sont placés le long d’une matrice imaginaire avec un axe X et un axe Y. Il existe également un axe Z, dans lequel les éléments peuvent être empilés. Il existe également un axe z, dans lequel les éléments peuvent être placés les uns devant ou derrière les autres. La propriété z-index est généralement utilisée pour placer les éléments le long de l’axe z.

N’oubliez pas que lorsque l’élément HTML racine est rendu, il est accompagné d’un contexte d’empilement racine/global.

Il existe de nombreuses façons de créer des contextes d’empilement dans le contexte d’empilement global. L’une des plus courantes consiste à utiliser position : relative avec z-index.

L’utilisation de position : sticky ou fixed fonctionne, mais fait sortir les éléments de la disposition du flux et nécessite des propriétés supplémentaires pour le placement souhaité.

Voir aussi :  Style des boutons CSS - survol, couleur et arrière-plan

Vous pouvez également utiliser transform, clip-path ou filter pour faciliter l’empilage. Pour voir toutes les façons dont le contexte d’empilement peut être formé, lisez la suite sur MDN Web Docs.

Les contextes d’empilement peuvent contenir des contextes d’empilement internes ultérieurs, et continuer à s’imbriquer davantage. C’est peut-être un peu trop « Inception » pour être conceptualisé, alors voyons pourquoi c’est utile.

Le trou noir de l’indice Z

wormhole-g9c2a60580_1280

L’utilisation de l’indice z peut être difficile à maintenir. Vous devez faire très attention à l’endroit où vous l’utilisez et aux valeurs que vous lui attribuez.

Les systèmes de conception peuvent aider à résoudre ces problèmes. Il peut être très utile de créer un ensemble de valeurs réutilisables et de documenter les cas dans lesquels elles doivent être utilisées. Par exemple, vous pouvez réserver vos valeurs de variable les plus élevées aux modales et autres éléments qui occuperont toujours la totalité de la page.

Mais la plupart du temps, nous essayons simplement de faire en sorte que notre style apparaisse comme nous le souhaitons. Ce qui peut signifier prescrire des valeurs d’index z arbitraires et continuer à augmenter ces valeurs jusqu’à ce qu’elles fonctionnent.

J’ai rencontré l’infâme z-index : 999999 ; à de nombreuses reprises. Retrouver ces valeurs aléatoires et créer un nouvel ordre peut devenir ardu. Cela peut conduire à des problèmes difficiles à déboguer.

Plus vous commencez à utiliser des nombres élevés, plus vous pouvez vous enfoncer dans le trou noir et plus il est difficile d’en sortir par la suite.

zindex

Faites simple avec l’isolation

Le fait de définir la propriété d’isolation sur isoler est un moyen simple de créer un nouveau contexte d’empilement sans avoir à recourir à l’indice z pour placer les éléments les uns devant les autres.

Voir aussi :  Les 5 grands framework CSS de 2022

Vous pouvez utiliser l’isolation sur des éléments à positionnement statique et cela n’affectera pas les éléments enfants. C’est un excellent moyen de créer une base isolée dans laquelle vous pouvez placer des éléments enfants. La propriété d’isolation est également largement prise en charge.

isolation-3

Pour rappel, voici la syntaxe de cette propriété :

.container-for-new-stacking-context {
  isolation : isolate ;
}

Pour résumer :

La définition de l’isolation : isolate ; créera un nouveau contexte d’empilement pour les éléments enfants lorsqu’elle sera appliquée à un élément de niveau supérieur.

Si vous avez trouvé cet article utile, n’hésitez pas à nous contacter sur Twitter @ui_natalie. Bon empilage !

Ressources