Discussion :

[Nemesis_m]

Bonjour, j'ai voulu d'abord poster sur le forum javascript mais il est indiqué que celui-ci est fermé aux nouvelles discussions. Je termine un site que j'ai codé dans le cadre d'un stage de fin de formation de développeur web, mais il me reste un "détail" que je n'arrive toujours pas à régler. J'ai intégré une bannière animée avec le site vanta js. Il s'agit de la bande avec les nuages sur laquelle est inscrite une citation. Le problème est que lorsque que je "déploie" le menu burger en version mobile, celui-ci passe derrière la div de nuages, intégrée en javascript, du coup on ne peut pas cliquer sur la plupart des liens. Le menu burger est déjà est en position absolute et j'ai bien sûr essayé avec les z-index, mais cela ne change rien le menu passe toujours derrière. La seule solution que j'ai trouvé pour le moment est de descendre le menu plus bas dans la page pour qu'il soit sous la bannière de la citation, mais c'est loin d'être l'idéal et j'aimerais quand même trouver le moyen de faire passer le menu au premier plan par rapport aux nuages. Si quelqu'un a idée pour me dépanner je l'en remercie d'avance.

[ProgElecT]

Salut

Bonjour, j'ai voulu d'abord poster sur le forum javascript mais il est indiqué que celui-ci est fermé aux nouvelles discussions.

Oui et non, car tu peux poster dans le forum Général JavaScript

[mathieu]

d'après ce que j'ai vu sur le site vanta, la zone animée utilise une balise "canvas" donc c'est peut-être possible de régler votre souci avec du code css.

montrez nous la page pour qu'on puisse la tester nous même directement.

[mathieu]

pour ce problème, c'est surtout le lien vers le site qui est utile puisqu'on peut directement utiliser les outils de développement de notre navigateur pour faire les tests.

quand vous avez expliqué votre souci je me suis directement dit "ça va vite être réglé avec z-index" mais au final j'ai un peu galéré et j'ai l'impression que ça règle le souci en ajoutant cela :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#nuages
{
	z-index : -1;
}

je ne sais si c'est le plus optimal et je ne suis même pas très sur d'avoir compris comment ça fonctionne, j'ai l'impression que ça a un rapport avec le contexte d'empilement qui est expliqué dans l'article suivant :
https://philipwalton.developpez.com/...aitre-z-index/
s'il y a un spécialiste du css qui passe par là et qui pourrait donner plus d'explications, ça m'intéresserait beaucoup.

[Nemesis_m]

Bonjour Matthieu, je revenais ici pour annoncer que j'avais pu régler le problème mais je vois que vous m'aviez déjà posté la solution depuis hier soir. Effectivement, il suffisait de mettre un z-index négatif aux nuages alors que je m'acharnais à mettre un z-index positif au menu burger. Je vais jeter un coup d'œil à cet article. Merci encore pour votre réponse et d'avoir pris le temps de vous pencher sur le sujet.

Je viens de lire l'article c'était très intéressant. Même si je n'ai pas tout suivi j'ai compris que le problème était dû à l'opacité. Effectivement mes nuages ont une opacité de 0.9 ce qui d'après l'article modifie le "contexte d'empilement". Je ne serais pas allé chercher cela tout seul. En plus d'avoir d'avoir résolu le problème j'ai donc une explication. Mille merci

[Nemesis_m]

Je précise que j'ai supprimé par précaution le message où je communiquais le lien du site, parce que la personne pour qui je l'ai développé reçois depuis peu du courrier indésirable par le biais du formulaire de contact. Cela ne vient pas forcément d'ici bien sûr mais je l'enlève de tous les forums où je l'ai laissé pour être plus tranquille.

Merci de votre compréhension

[NoSmoking]

Bonjour,

Je précise que j'ai supprimé par précaution le message où je communiquais le lien du site,

sauf qu'en procédant de la sorte la discussion n'a plus grand sens

Ceci étant, ton approche du problème n'a peu être pas été la bonne.

...mais cela ne change rien le menu passe toujours derrière.

non car au départ il est bel et bien derrière, affichage par défaut suivant ordre dans la page, donc le challenge est de le faire passer au premier plan.

Si l'on regarde la structure mise en place

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<header>
  <!-- le menu est ICI -->
</header>
<nav></nav>
<main>
  <section>
    <!-- l'effet nuage est ICI -->
  </section>
</main>

Il faut dans ce cas s'occuper des conteneurs des éléments « menu »menu et « nuage » et non des éléments eux même.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
header {
  position: relative;  /* pour servir de référent */
  z-index: 1;          /* pour mettre en avant */
}

pour faire passer le header en premier plan et rien besoin d'autre !

Ressources :

Ce que vous avez toujours voulu savoir sur CSS [Contexte d’empilement]

PS :
la page n'est pas conforme W3C : Voir https://validator.w3.org/nu/