[Résolu] Z-index ne fonctionne pas correctement

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 apparaissent 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 !

Bonjour,

Dans le css, pour le sélecteur .dropdown-menu::after, supprime la box-shadow et la -webkit-box-shadow, et mets un top: 0.5rem; au lieu de top: 0.375rem;

Ça devrait rendre inutile de mettre ce pseudo-élément en dessous de son élément.

Amicalement,

pour que z-index fonctionne il faut ajouter

position:absolute

Modifié par drphilgood (24 Apr 2023 - 22:32)

Bonjour,

drphilgood a écrit :
pour que z-index fonctionne il faut

position:absolute

C'est déjà le cas.

Et ça ne suffit pas ! Dans l'exemple donné dans le post initial, il faut ni z-index ni transform sur l'élement parent du pseudo-element, sinon, le pseudo-element ne pourra pas passer en dessous de ce parent. En langage savant, il ne faut pas qu'un nouveau "stacking context" soit créé pour cet élément parent. Or tout z-index associé à un position:relative ou absolute, ou bien tout transform en crée un pour l'élément qui a ces propriétés.

Amicalement,
Modifié par parsimonhi (24 Apr 2023 - 22:51)

Merci pour vos solutions, elles fonctionnent toutes les deux ! J'ai une préférence pour la propriété mix-blend-mode que je ne connaissais pas. Elle permet de conserver l'ombrage sur le pseudo élément.

Par contre je ne comprends pas d'où vient ce bug. Il ne semble pas venir d'un nouveau stacking context créé par la rotation du carré car lorsque la transformation est supprimée le z-index négatif du pseudo élément ne suffit pas à le placer derrière le dropdown-menu.

Mon design est inspiré d'un template bootstrap:

https://themes.getbootstrap.com/preview/?theme_id=19799

On peut voir qu'ils ont réussi à faire passer ce petit carré derrière le dropdown-menu malgré la rotation et je ne comprends vraiment pas pourquoi ca fonctionne pour eux et pas pour moi. Ma feuille de style est pratiquement un copié-collé et pourtant le rendu est différent.
Modifié par BigBenJr (25 Apr 2023 - 06:41)

Bonjour,

BigBenJr a écrit :
Par contre je ne comprends pas d'où vient ce bug. Il ne semble pas venir d'un nouveau stacking context créé par la rotation du carré car lorsque la transformation est supprimée le z-index négatif du pseudo élément ne suffit pas à le placer derrière le dropdown-menu.

C'est le transform: translate3d(0px, 53.5px, 0px); + le z-index: 1000 sur le parent (ce parent est l'élément qui à la classe .dropdown-menu) du pseudo-element qui crée le nouveau stacking context qui empêche le pseudo-element de se placer derrière, et non pas la rotation du pseudo-element qui elle n'a pas d'importance pour ce problème.

Amicalement,

Merci pour ces précisions et votre aide très apprécie, excellente journée !
Modifié par BigBenJr (25 Apr 2023 - 07:31)