Bonjour,
Alors j'ai mis en place un barre de navigation déroulante, mais malgré avoir mis un z-index supérieur au reste du z-index de ma page mon menu déroulant reste à l'arrière plan :/.
Quelqu'un aurait une idée de ce qui se passe ?

le code de ma barre de naviguation :

<!--
On crée notre menu de naviguation par défault qu'on replaceras partour où se sera nécessaire.
Notre menu change en fonction de l'utilisateur (anonyme, enregistré, administrateur).- 
-->

<link rel='stylesheet' href='stylesheet_nav.css' type='text/css' media='all' />


<?php
include('initialisation_var.php');
?>


<nav>
	<ul>
		<li class="menu"> <?php echo "<a href='constructeur_page.php?page=" . $_GET['page'] . "'>Menu </a>" ; ?>
		
		
			<ul class="submenu">
				
				<li><a href="constructeur_page.php?page=galerie">Galerie </a></li>
				<li><a href="constructeur_page.php?page=description_jeu">Description du jeu </a></li>
				<li><a href="constructeur_page?page=univers">L'univers </a></li>
				
				<?php   // Accessible uniquement pour les utilisateurs enregistré 
						//Pour l'instant uniquement ceux ayant un pseudo different de 'anon
				
				if($_SESSION['pseudo'] != 'anon')
				{ echo "<li><a href='constructeur_page.php?page=jeu'>Accès jeu</a></li>";}
				?>
				
			</ul>
		</li>
		
		<li id="Accueil"><a href="constructeur_page.php?page=acceuil">Accueil </a></li>
		
		<?php   // Accessible uniquement pour les utilisateurs enregistré 
				//Pour l'instant uniquement ceux ayant un pseudo different de 'anon'
				
			if($_SESSION['pseudo'] != 'anon')
			{ echo "
				<li class='monCompte'><a href='constructeur_page.php?page=monCompte'>Mon compte </a>
					<ul class='submenu'>
						<li><a href='constructeur_page.php?page=monCompte'>Préférence </a></li>
						<li><a href='gestion_post.php?connexion=end'>Deconnexion </a></li>
					</ul>
				</li>"; }
			else
			{ echo "<li class='monCompte'><a href='constructeur_page.php?page=monCompte'>Se connecter </a></li>"; }
		?>
		</ul>
</nav>

Le code de ma galerie

<!--
Galerie d'image, pour l'instant ce sont des images fixes, plus tard
la gestion de cette galerie sera faite avec SQL, de plus elle auront pour
objectif de montrer des images de lieu du jeu pour attirer de potentiel
client.
-->

<link rel='stylesheet' href='stylesheet_galerie.css' type='text/css' media='all' />


<main>

	<h1>Galerie</h1>

	<iframe src='iframe_galerie.php' width=100% height=400>
	</iframe>	
	
</main>

le code de ma barre de naviguation (CSS)

.submenu {
	display: none;
	width: 130px;
	padding: 0px 30px 0px 0px;
	z-index: 10;
}

nav ul li:hover{
	background-color: #404080;
}

.menu:hover .submenu{
	position: absolute;
	background-color: #383879;
	display: inline-block;
	width: 66%;
	height: 80px;
	padding-left: 17%;
	padding-right: 17%;
	top: 60px;
	left: 0px;
	z-index: 10;
}

.monCompte:hover .submenu{
	position: absolute;
	background-color: #383879;
	display: block;
	width: 66%;
	height: 40px;
	padding-left: 17%;
	padding-right: 17%;
	top: 60px;
	left: 0px;
	z-index: 10;
}
.submenu li{
	display: block;
	width: 130px;
}

body {
	margin: 0px;
	padding: 0px;
}

nav {
	margin: 0px;
	padding: 0px;
	top:100%;
	height: 60px;
	width: 100%;
	background-color: #383879;
}

nav > ul {
	width: 100%;
	float: left;
	margin: 0px;
	padding: 0px;
}

a:visited{
	color: white;
}

li {
	list-style-type: none;
}



.menu{
	position: absolute;
	left: 0px;
	height: 60px;
	width: 20%;
	padding-left: 5%;
	padding-right: 5%;
}

#Accueil{
	position: absolute;
	left: 33%;
	height: 60px;
	width: 20%;
	padding-left: 5%;
	padding-right: 5%;
}

.monCompte{
	position: absolute;
	right: 0px;
	height: 60px;
	width: 20%;
	padding-left: 5%;
	padding-right: 5%;
}

le code css de mon main

main{
	position: relative;
	width: 100%;
	z-index: 1;
}

h1{
	z-index: 1;
}

iframe{
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 450px;
	z-index:1;
}

Bonjour,

Sujet résolu

Tu as passé le sujet à "résolu" sans expliquer le pourquoi du comment ... Un petit retour à la communauté est toujours appréciable ...

-
Edité par Benzouye 27 décembre 2018 à 16:19:41

Bonjour,

Effectivement sur le moment je n'y ai pas pensé. Le problème provenait du fait que j'avais modifié le z-index de ma barre déroulante et du titre <h1> de mon body. Seulement j'ai vu sur la doc en ligne que le z-index n'avait d'impact que sur des objets appartenant au même conteneur. Donc pour résoudre mon problème j'ai modifié le z-index du <nav> et du <body>. Je ne sais pas si c'étais la solution optimale mais sa a fonctionné. Voilà tout bonne journée !