Problème de z-index ?

Bonsoir,

Je suis face à un problème. J’ai bien lu (pour être sûr de ne pas être passé à côté d’une info essentielle) votre article sur le z-index, et après coup, je pense l'utiliser correctement.

Voici un codepen pour illustrer mon problème: https://codepen.io/anon/pen/eEOLQm
En gros, une fois le menu déployé, un overlay doit s’étendre sur tout l’écran comme actuellement. Petite subtilité, le bouton « mon bouton » dans le menu en haut à gauche doit passer au dessus l’overlay.

En se rapprochant de ce que j'ai déjà fait, les z-index me semble bien utilisés:
Menu ouvert: z-index: 15, Overlay: z-index: 10, mon bouton: z-index: 9999 (on est jamais assez sûr ).

Pourtant, le bouton reste toujours en dessous de l’overlay…

Une petite idée ?

Merci.
Modifié par lorraineS (22 Jul 2017 - 21:28)

Bizarre, parce que j'arrive à cliquer sur le bouton "mon bouton" donc il est bien au dessus de l'overlay. Il a la classe .btn et est en float: right? Je vois pas de bouton dans un menu en haut à gauche. Je vois même pas de menu. Je vais considérer que c'est la div .main-menu qui est le menu en question et d'ailleurs il passe en dessus du overlay.

Dans tous les cas, ça ne sert à rien de donner de z-index au bouton .btn sauf s'il doit se positionner devant ses frères (hors il est fils unique). Donc le z-index: 999 doit être sur le parent .header-top et du coup le overlay rouge prends cette fois-çi toute la largeur de l'écran.

Ici le parent c'est body qui contient 3 enfants: .header-top, .main-menu & .menu-overlay. Donc pour positionner ces éléments l'un au dessus ou dessous de l'autre, il faudra appliquer la propriété z-index à eux seulement et non aux enfants.

Je sais pas si c'est le résultat attendu.

Comme je l'ai expliqué plus haut, donner un z-index au bouton ne servira strictement à rien. Il faut le donner au parent. Pourtant, le bouton reste cliquable donc il est bien accessible donc au dessus du overlay (la barre rouge j'imagine).

Je suis pas sûr de bien comprendre....Mets le codepen à jour avec les z-index sur les parents et le code menu en question entièrement , ce sera plus clair. Je pense qu'il y a une meilleure façon de code cet overlay.
Modifié par allan00958 (23 Jul 2017 - 10:46)

Je considère l'overlay comme étant le background (bleu/gris) de fond, la barre rouge elle représente la navigation.

J'ai bien compris qu'en mettant un z-index à ma navigation (le parent du bouton), celle-ci sera visible et "vu" par dessus l'overlay. Mais ce que je souhaite faire, c'est uniquement mettre en avant le bouton, pas la totalité du menu. C'est justement toute la difficulté. En ajoutant un z-index au parent, TOUTE la navigation sera mise en avant.

J'ai ajouté un fake logo pour mieux comprendre: https://codepen.io/anon/pen/mMbZjV

Ici, le bouton "mon bouton" doit passer au dessus de tout et uniquement ce bouton. La navigation, le logo, eux, doivent rester derrière l'overlay.

Voici une maquette qui résume le résultat attendu. On voit que le bouton est désormais au premier plan:
Modifié par lorraineS (23 Jul 2017 - 13:12)

Bonjour.

Je n'ai pas la dernière version de Firefox mais en ce qui me concerne, le bouton est bien au-dessus de l'overlay.

Je vois pas d'outline lors du clic.
Je suppose que ce overlay sera affiché lors d'un clic ou d'un scroll, peut-être rajouter un bouton à l'intérieur div overlay, quitte à avoir 2 boutons.

Disons que mon bouton à plusieurs états en fonction de plusieurs paramètres. Dupliquer toute une partie du code dans toutes les pages n'est pas vraiment la solution...

Concernant le screenshot il ne s'est pas upload correctement, mais je te confirme que je peux bien cliquer dessus

Ce n'est pas faisable. comme dit précédemment, mon bouton est lié à mon menu. Dès que le menu change d'état (au scroll notamment) tout mon bouton est impacté. En le faisant sortir, ça ne fonctionnera plus.

Je vais devoir trouver une autre solution

Bonjour,

Zelena a écrit :
Hum… pourquoi ne pas mettre l'overlay directement sous le bouton ?

Ce n'est pas très élégant, mais ça fonctionne.