z-index ne fonctionne pas correctement

Big Ben Jr
Les bases HTML/CSS

Bonjour,

Je ne parviens pas à faire en sorte qu'un pseudo élément (z-index de -1) s'affiche à l'arrière d'un autre élément (z-index de 1000). Regardez sur cette page:

https://math-coaching.com/bug.html

Cliquez sur n'importe lequel des trois icones à droite de la barre de navigation.

Toutes les éléments qui apparaissent en dropdown (class dropdown-menu) sont positionnés derrière le pseudo élément ::after, alors que le pseudo élément possède un z-index de -1 et les éléments qui aparaissent ont un z-index de 1000.

Il en résulte que je ne parviens pas à obtenir l'effet d'un petit triangle pointant vers l'icone à l'origine du dropdown.

Quelqu'un aurait-il une solution à ce problème ?
Un GRAND merci !

3 réponses

Max-ime
Réponse acceptée

Salut,

Le z-index ne fonctionne que pour les enfants de ton élément, voir les premières lignes : https://developer.mozilla.org/fr/docs/Web/CSS/z-index

Par exemple, pour le premier élément à droite de ton menu (la cloche), si tu retires le padding à ta class .dropdown-menu et que tu ajoutes un background blanc à ton élément enfant (par exemple .card-notification) ça va fonctionner.

Big Ben Jr
Auteur

Merci pour ton aide Maxime, j'ai pu résoudre le problème en utilisant la propriété mix-blend-mode: lighten;

Ludovico

Salut,
Je vois que tu as un souci avec ton pseudo élément ::after qui s'affiche devant ton élément dropdown-menu. C'est un problème de z-index, mais pas si simple à résoudre. En fait, le z-index du pseudo élément est relatif à celui de son élément parent. Donc si tu mets un z-index positif à ton élément parent, tu crées un nouveau contexte d'empilement et tu places le pseudo élément au-dessus de tout ce qui est en dehors de ce contexte.
Pour que ton pseudo élément s'affiche derrière ton élément parent, il faut donc que tu mettes un z-index négatif à ton élément parent, et un z-index encore plus négatif à ton pseudo élément.
Mais attention, en faisant ça, tu vas aussi placer ton élément parent derrière tout ce qui a un z-index positif ou nul. Donc si tu veux que ton dropdown-menu s'affiche devant le reste de la page, il faut que tu lui donnes un z-index positif suffisamment élevé
J'espère que ça t'aide à résoudre ton problème avec le pseudo élément ::after. Tiens-nous au courant si ça marche ou pas. Bonne journée !