4 raisons pour lesquelles votre z-index ne fonctionne pas (et comment y remédier) - Coder Coder

Cet article a été initialement publié sur Coder-Coder.com.

Z-index est une propriété CSS qui vous permet de positionner des éléments dans des couches les uns sur les autres. C'est super utile, et honnêtement, un outil très important pour savoir comment l'utiliser en CSS.

Malheureusement, z-index est l'une de ces propriétés qui ne se comporte pas toujours de manière intuitive. Cela semble simple au début - un nombre d'index z plus élevé signifie que l'élément sera au-dessus des éléments avec des numéros d'index z inférieurs. Mais il existe des règles supplémentaires qui compliquent les choses. Et vous ne pouvez pas toujours résoudre les problèmes en définissant le z-index sur 999999! ?

Cet article explique en détail quatre des raisons les plus courantes pour lesquelles z-index ne fonctionne pas pour vous, et comment vous pouvez y remédier.

Nous allons passer en revue quelques exemples de code réels et les résoudre. Après avoir lu cet article, vous serez en mesure de comprendre et d'éviter ces pièges courants de z-index!

Voyons la première raison:

1. Les éléments dans le même contexte d'empilement s'affichent par ordre d'apparition, les derniers éléments au-dessus des anciens éléments.

Dans notre premier exemple, nous avons une mise en page relativement simple qui comprend 3 éléments principaux:

  • Une image d'un chat
  • Un bloc blanc avec du texte
  • Une autre image du même chat

Voici le balisage HTML pour cela:

 Meow meow meow... 

Dans cette mise en page, nous voulons idéalement que le bloc de texte blanc soit au-dessus des deux chats.

Pour essayer d'y parvenir, nous avons ajouté des marges négatives au CSS pour les deux images de chat, afin qu'elles chevauchent un peu le bloc blanc:

.cat-top { margin-bottom: -110px; } .cat-bottom { float: right; margin-top: -120px; }

Cependant, cela ressemble à ceci:

Le premier chat est en effet positionné sous le bloc de contenu blanc, comme on le souhaite. Mais la deuxième image de chat est positionnée au-dessus du bloc!

Pourquoi cela arrive-t-il?

La raison de ce comportement est due à l' ordre d'empilement naturel sur la page Web. Ces lignes directrices déterminent essentiellement quels éléments seront en haut et lesquels seront en bas.

Même si les éléments n'ont pas leur z-index défini, il y a une rime et une raison pour laquelle ceux-ci seront en tête.

Dans notre cas, aucun des éléments n'a de valeur z-index. Leur ordre d'empilement est donc déterminé par leur ordre d'apparition. Selon cette règle, les éléments qui viennent plus tard dans le balisage seront au-dessus des éléments qui viennent avant eux.

(Vous pouvez en savoir plus sur les instructions relatives à l'ordre d'empilement sur Mozilla Developer Network ici.)

Dans notre exemple avec les chats et le bloc blanc, ils obéissent à cette règle. C'est pourquoi le premier chat se trouve sous l'élément de bloc blanc et le bloc blanc sous le deuxième chat.

Ok, l'ordre d'empilement est bien beau, mais comment corriger le CSS pour que le deuxième chat soit sous le bloc blanc?

Regardons la deuxième raison:

2. L'élément n'a pas sa position définie

L'une des autres directives qui déterminent l'ordre d'empilement est de savoir si un élément a sa position définie ou non.

Pour définir la position d'un élément, ajoutez la positionpropriété CSS à autre chose que static, comme relativeou absolute. (Vous pouvez en savoir plus à ce sujet dans cet article que j'ai écrit.)

Selon cette règle, les éléments positionnés s'afficheront au-dessus des éléments non positionnés.

Ainsi, définir le bloc blanc comme étant position: relativeet laisser les deux éléments de chat non positionnés placera le bloc blanc sur le dessus des chats dans l'ordre d'empilement.

Voici à quoi cela ressemblera - vous pouvez également jouer avec le Codepen ci-dessus.

Woohoo!

Maintenant, la prochaine chose que nous voulons faire est de faire pivoter le chat du bas à l'envers, en utilisant la transformpropriété. De cette façon, les deux chats seront sous le bloc blanc, avec seulement la tête qui dépasse.

Mais cela peut entraîner une z-indexconfusion plus liée. Nous aborderons le problème et la solution dans la partie suivante.

3. La définition de certaines propriétés CSS comme l'opacité ou la transformation placera l'élément dans un nouveau contexte d'empilement.

Comme nous venons de le mentionner, nous voulons retourner le chat du bas. Pour ce faire, nous ajouterons transform: rotate(180deg).

.cat-bottom { float: right; margin-top: -120px; transform: rotate(180deg); }

Mais cela fait à nouveau apparaître le chat du bas au-dessus du bloc blanc!

Mais qu'est ce qu'il se passe ici??

Vous ne rencontrez peut-être pas souvent ce problème, mais un autre aspect de l'ordre d'empilement est que certaines propriétés CSS aiment transformou opacityplacent l'élément dans son propre nouveau contexte d'empilement.

Cela signifie que l'ajout transformde l' .cat-bottomélément à l' élément fait qu'il se comporte comme s'il avait un z-indexégal à 0. Même s'il n'a pas de son positionou z-indexdéfini du tout! (W3.org a une documentation informative mais assez dense sur la façon dont cela fonctionne avec la opacitypropriété)

N'oubliez pas que nous n'avons jamais ajouté de z-indexvaleur au bloc blanc, seulement position: relative. C'était suffisant pour positionner le bloc blanc au-dessus des chats non positionnés.

Mais puisque l' .bottom-catélément agit comme s'il était relativement positionné avec z-index: 0, sa transformation l'a positionné au-dessus du bloc blanc.

La solution à cela est de définir position: relativeet de définir explicitement z-indexau moins le bloc blanc. Vous pouvez aller plus loin et régler position: relativeet abaisser z-indexles éléments du chat, juste pour être plus sûr.

.content__block { position: relative; z-index: 2; } .cat-top, .cat-bottom { position: relative; z-index: 1; }

À mon avis, cela résoudra la plupart, sinon tous les problèmes les plus élémentaires de z-index.

Maintenant, passons à notre dernière raison pour laquelle votre z-indexne fonctionne pas. Celui-ci est un peu plus complexe, car il implique des éléments parents et enfants.

4. L'élément est dans un contexte d'empilement inférieur en raison du niveau d'index z de son parent

Regardons notre exemple de code pour cela:

Voici ce que nous avons: une page Web simple avec un contenu régulier et un onglet latéral rose qui dit «Envoyer des commentaires» qui est placé au-dessus du contenu.

Ensuite, lorsque vous cliquez sur la photo du chat, une fenêtre modale avec une superposition de fond gris transparent s'ouvre.

Cependant, même lorsque la fenêtre modale est ouverte, l'onglet latéral est toujours au-dessus de la superposition grise. Nous voulons que la superposition soit affichée sur tout, y compris l'onglet latéral.

Jetons un œil au CSS pour les éléments en question:

.content { position: relative; z-index: 1; } .modal { position: fixed; z-index: 100; } .side-tab { position: fixed; z-index: 5; }

Tous les éléments ont leur position définie et l'onglet latéral a un z-indexde 5, ce qui le positionne au-dessus de l'élément de contenu, qui est à z-index: 1.

Ensuite, le modal a z-index: 100qui devrait le placer au-dessus de l'onglet latéral à z-index: 5. Mais à la place, la superposition modale se trouve sous l'onglet latéral.

Pourquoi cela arrive-t-il?

Auparavant, nous avons abordé certains facteurs qui entrent dans le contexte d'empilement, par exemple si l'élément a sa position définie, ainsi que son ordre dans le balisage.

Mais encore un autre aspect du contexte d'empilement est qu'un élément enfant est limité au contexte d'empilement de son parent.

Examinons de plus près les trois éléments en question.

Voici le balisage que nous avons:

En regardant le balisage, nous pouvons voir que le contenu et les éléments de l'onglet latéral sont des frères. Autrement dit, ils existent au même niveau dans le balisage (c'est différent du niveau z-index). Et le modal est un élément enfant de l'élément de contenu.

Comme le modal est à l'intérieur de l'élément de contenu, sa valeur z-indexde 100 n'a d'effet qu'à l'intérieur de son parent, l'élément de contenu. Par exemple, s'il y avait d'autres éléments enfants qui étaient des frères du modal, leurs z-indexvaleurs les placeraient au-dessus ou en dessous les uns des autres.

Mais la z-indexvaleur de ces éléments enfants ne signifie rien en dehors du parent, car l'élément de contenu parent a sa valeur z-index1.

Ainsi, ses enfants, y compris le modal, ne peuvent pas sortir de ce z-indexniveau.

(Vous pouvez vous en souvenir avec cette métaphore un peu déprimante: un enfant peut être limité par ses parents et ne peut pas se libérer d'eux.)

Il existe plusieurs solutions à ce problème:

Solution: déplacez le modal en dehors du parent de contenu et dans le contexte d'empilement principal de la page.

Le balisage corrigé ressemblerait alors à ceci:

Maintenant, l'élément modal est un élément frère des deux autres. Cela place les trois éléments dans le même contexte d'empilement qu'eux, de sorte que chacun de leurs niveaux z-index va maintenant s'influencer mutuellement.

Dans ce nouveau contexte d'empilement, les éléments s'afficheront dans l'ordre suivant, de haut en bas:

  • modal ( z-index: 100)
  • languette latérale ( z-index: 5)
  • contenu ( z-index: 1)

Solution alternative: supprimez le positionnement du contenu afin de ne pas limiter le z-index du modal.

Si vous ne voulez pas ou ne pouvez pas modifier le balisage, vous pouvez résoudre ce problème en supprimant le positionparamètre de l'élément de contenu:

.content { // No position set } .modal { position: absolute; z-index: 100; } .side-tab { position: absolute; z-index: 5; }

Puisque l'élément de contenu est désormais non positionné, il ne limitera plus la z-indexvaleur du modal . Ainsi, le modal ouvert sera positionné au-dessus de l'élément de l'onglet latéral, en raison de son plus élevé z-indexde 100.

Bien que cela fonctionne, je choisirais personnellement la première solution.

Parce que si pour une raison quelconque à l'avenir vous devez positionner l'élément de contenu, cela limitera à nouveau l'ordre du modal dans le contexte d'empilement.

En résumé

J'espère que vous avez trouvé ce tutoriel utile! Pour résumer, la plupart des problèmes avec z-index peuvent être résolus en suivant ces deux directives:

  1. Vérifiez que les éléments ont leur position définie et leurs numéros d'index z dans le bon ordre.
  2. Assurez-vous que vous n'avez pas d'éléments parents limitant le z-indexniveau de leurs enfants.

Vouloir plus?

Je crée un cours de responsive design! Inscrivez-vous ici pour recevoir un e-mail lors de sa publication.

J'écris des tutoriels de développement Web sur mon blog coder-coder.com, je poste des mini-astuces sur Instagram et des tutoriels de codage sur YouTube.