27819 sujets

CSS et mise en forme, CSS3

Bonjour,
je suis débutant en css et je souhaite créer mon premier site web, grâce à cette vidéo : https://youtu.be/HQopEEurQYE j'ai codé et adapté le Header pour le site. Je souhaite ensuite rajouter le contenu à savoir un <h1> etc.
Lorsque que le site est en version mobile comme il est codé dans la vidéo, le menu horizontal qui est normalement en haut de page devient le "menu burger" et le menu s'affiche donc en apparaissant de la gauche. Hors dans cette configuration si je rajoute un <h1> après avoirs mis </Header> les contenus du <h1> apparaît par dessus le menu qui apparaît de gauche (voir Image jointe) alors que je souhaiterais qu'il reste dans le fond en flou.
Comment pourrais je faire celà, merci beaucoup d'avance.
Tristan K
Modifié par TristanK (05 Aug 2022 - 16:49)
Bonjour. Il faut faire passer le contenu de la navigation au dessus de tout le reste. Je ne suis pas sûr, mais il me semble que l'élément à faire passer au-dessus est .nav-links et ce dernier est déjà en position absolute, il suffit donc de lui ajouter un z-index pour "monter" l'élément, par exemple :
.nav-links {
    z-index: 1000; /* C'est une grosse valeur, mais il y a bien souvent tout un tas d'éléments dans les pages susceptibles de posséder un z-index élevé */
}

Modifié par Olivier C (05 Aug 2022 - 19:29)
Meilleure solution
Olivier C a écrit :
Bonjour. Il faut faire passer le contenu de la navigation au dessus de tout le reste. Je ne suis pas sûr, mais il me semble que l'élément à faire passer au-dessus est .nav-links et ce dernier est déjà en position absolute, il suffit donc de lui ajouter un z-index pour "monter" l'élément, par exemple :
.nav-links {
    z-index: 1000; /* C'est une grosse valeur, mais il y a bien souvent tout un tas d'élément dans les pages susceptible de posséder un z-index élevé */
}

Bonjour, je viens d'essayer et tout marche nickel, merci beaucoup !!