Z-index ne fonctionne pas correctement

HTML-CSS
1

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:

math-coaching.c o m/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 !

2

Not sure if I understood correctly. You want the bottom of the triangle to be behind the menu, right?

Change the inline style transform: translate(0px, 58px); on .dropdown-menu to top: 100%, then remove z-index: 1000; from .dropdown-menu.

transform creates a new stacking context.

You should also create an actual triangle instead but I guess the box-shadow wouldn’t work with that.

3

Thanks your solution works perfectly !

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.