Bonjour,
J’ai en local un site réalisé il y a plusieurs années (en fait une compilation d’articles publiés sur divers sites), que je retravaille périodiquement. Le contenu se trouve dans des balises <main></main> en position: relative et possédant un z-index: 1.
Les menus, constitués de balises <nav></nav> contenant des <a></a> en display: block sont positionnés à droite de la page, et les <a<></a> de ces menus ont une position: relative.
En cas de réduction de la largeur de la fenêtre du navigateur, les menus glissent sous la colonne <main></main>, mais, en cas de survol d’un élément <a></a> de menu, celui-ci est doté d’un z-index: 2 et est alors affiché devant la colonne de contenu.
En image, ça donne ça :
C’est du moins ce qui se passait l’avant-dernière fois que j’ai testé ce comportement.
Or, hier, j’ai retesté ledit comportement, et hormis dans IE11 (je suis encore sous Windows 7), les items de menu ne repassent plus devant la colonne de contenu.
J’ai notamment essayé de modifier les z-index (z-index: 1 pour les menus, z-index: 2 pour la colonne de contenu et z-index: 3 pour les items de menu survolés), consultés moult tutos sur le z-index, rien n’y fait : pas possible de faire repasser les items de menu devant la colonne de contenu au survol de ceux-ci.
Quelqu’un a une idée ?
Les codes concernés :
HTML
CSS
Merci d'avance.
Modifié par thierry (19 Feb 2016 - 17:22)
J’ai en local un site réalisé il y a plusieurs années (en fait une compilation d’articles publiés sur divers sites), que je retravaille périodiquement. Le contenu se trouve dans des balises <main></main> en position: relative et possédant un z-index: 1.
Les menus, constitués de balises <nav></nav> contenant des <a></a> en display: block sont positionnés à droite de la page, et les <a<></a> de ces menus ont une position: relative.
En cas de réduction de la largeur de la fenêtre du navigateur, les menus glissent sous la colonne <main></main>, mais, en cas de survol d’un élément <a></a> de menu, celui-ci est doté d’un z-index: 2 et est alors affiché devant la colonne de contenu.
En image, ça donne ça :
C’est du moins ce qui se passait l’avant-dernière fois que j’ai testé ce comportement.
Or, hier, j’ai retesté ledit comportement, et hormis dans IE11 (je suis encore sous Windows 7), les items de menu ne repassent plus devant la colonne de contenu.
J’ai notamment essayé de modifier les z-index (z-index: 1 pour les menus, z-index: 2 pour la colonne de contenu et z-index: 3 pour les items de menu survolés), consultés moult tutos sur le z-index, rien n’y fait : pas possible de faire repasser les items de menu devant la colonne de contenu au survol de ceux-ci.
Quelqu’un a une idée ?
Les codes concernés :
HTML
<nav>
<a>item de menu</a>
<a>item de menu</a>
<a>item de menu</a>
</nav>
<main>
Contenu
</main>
CSS
main {
position: relative;
z-index: 1;
}
nav a:hover, nav a:focus, nav a:active {
position: relative;
z-index: 2;
}
Merci d'avance.
Modifié par thierry (19 Feb 2016 - 17:22)