28112 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de z-index

Bonjour
Je bloque sur la position d'un élément.Voici ici mon problème.Je voudrais positionner l'image de ma class nav au dessus de ma class slider de façon à ce que l'image bg_nav.png passe par dessus la class slider

J'ai beau rajouter des z-index ca ne bouge pas.Où est mon erreur ?


<!doctype html>
<html lang="fr-FR">

<head>
	<title>Demo</title>
	<meta content="text/html; charset=utf-8" http-equiv="content-type">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<header>
		<div class="slider">
			<div class="nav">
				<nav>	
				</nav>
			</div>
		</div>
		<div class="ribon_bas">
			
		</div>
	</header>
	<div class="content">
		<div class="bloc">
			
		</div>
		<div class="bloc">
			
		</div>
		<div class="bloc">
			
		</div>
	</div>
	<footer>
		
	</footer>
</body>
</html>




body{background: #528036; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIyJSIgc3RvcC1jb2xvcj0iIzUyODAzNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc3JSIgc3RvcC1jb2xvcj0iI2EwYzE1YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhMGMxNWMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left,  #528036 2%, #a0c15c 77%, #a0c15c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(2%,#528036), color-stop(77%,#a0c15c), color-stop(100%,#a0c15c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #528036 2%,#a0c15c 77%,#a0c15c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #528036 2%,#a0c15c 77%,#a0c15c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #528036 2%,#a0c15c 77%,#a0c15c 100%); /* IE10+ */
background: linear-gradient(to right,  #528036 2%,#a0c15c 77%,#a0c15c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#528036', endColorstr='#a0c15c',GradientType=1 ); /* IE6-8 */
margin: 0 auto;}
header{}
.nav{background: url(bg_nav.png) no-repeat scroll 0 -31px rgba(0, 0, 0, 0);height: 126px;margin: 0 auto;width: 1070px;z-index: 3;position: relative;}
.slider{background: none repeat scroll 0 0 #b8d762;height: 250px;margin-top: 20px;width: 100%;z-index: 2;position: relative;}

Modifié par stephane72 (25 Oct 2014 - 10:23)
Bonjour,

J'avoue ne pas très bien saisir la problématique, pourrais-tu repréciser ta demande, fournir un schéma ?
Là, dans l'immédiat je ne vois pas très bien pourquoi tu ne places pas ton menu de navigation (c'est de cela qu'il s'agit ?) en premier dans ton code HTML (avant le slider).
Nous pourrions sans doute mieux appréhender les choses (et peut-être te conseiller) si ton exemple avait un peu de contenu, qui fait quoi, pourquoi (ton div ribon_bas sert à quoi ?) ? Smiley cligne
Ça va peut-être se compliquer avec une version responsive, non ?

Bref, aides-nous à te venir en aide plus efficacement Smiley cligne
Ok voici le psd.Il faut donc que j'arrive à passer l'image de ma class nav au dessus de ma class slider de façon à ce que l'image bg_nav.png passe par dessus la class slider
Je rejoins 6l20 :

Tu dois sortir ta <div class="nav"> de ta <div vlass="slider"> :

<header>
	<div class="nav">
		<nav>	
		</nav>
	</div>
	<div class="slider">
	</div>
	<div class="ribon_bas">
</header>


Sur "nav" tu mets ton BG et c'est tout, pas besoin de z-index vu d'ici et d'après ce que j'ai compris...
Modifié par LauGau (25 Oct 2014 - 15:54)
Sujet clos
Aller à