probleme z-index sur divs non imbriquées

phima · 29 Janvier 2007

Bonjour, je souhaiterais pouvoir définir un z-index sur des divs en absolu mais sans que les unes soient sous les autres... pas facile a expliquer, voici un graphique :

|div#1|-----|image1|-----|div#2|-----|image2|

imaginons que mon image2 dépasse de div#1 et chevauche l'autre div#1

et ben elle se trouve en dessous de la première div#1 ce qui est très génant pour la suite de mon code... si qq a une ingénieuse idée !! je lui en serais reconnaissant !!

merci d'avance !!

voici un code exemple :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>

<style type="text/css">
*{padding: 0; margin: 0;}
#dessous{
	position: relative;
	margin-top: 100px;
	background: red;
	width: 200px;
	height: 200px;
	float: left;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	z-index: 1;
}

#dessus{
	position: relative;
	top: 75px;
	left: 113px;
	margin-left: -20px;
	background: yellow;
	width: 259px;
	height: 40px;
	z-index: 3;
}

#ess #dessous #dessus a {
	z-index: 4;
}
</style>
</head>

<body>
<div id="ess">

<div id="dessous">
	<div id="dessus">
	<a href="#" alt="">test</a>	</div>
</div>

<div id="dessous">
	<div id="dessus">
	<a href="#" alt="">test</a>	</div>
</div>

</div>
</body>
</html>

ghost · 29 Janvier 2007

Bonjour,

désolé, je n'ai pas tout compris !

karnabal · 29 Janvier 2007

Salut,

Difficile de t'aider car bien que tu nous donnes ton code, celui-ci ne nous permet pas de voir où se situe ton problème. Peux-tu l'éditer de sorte à ce que ce problème soit clairement identifiable, ce qui t'épargnera par la même de te prendre la tête à nous l'expliquer.

dldstyle · 29 Janvier 2007

Bonjour phima,

pas tout à fait saisi ton idée mais je peux déjà te dire qu'il y a des erreurs dans ton code .

Un "id" ne peut être qu'unique dans une page contrairement au "class".

Revois ton code pour remplacer tes id="dessous" pas des class="dessous". Idem pour les id="dessus". Dans ta feuille de style tu vas ensuite remplacer #dessous par .dessous.

Je te conseille la lecture de ces quelques pages de CSS débutant pour bien te lancer dans les css

xpatval · 29 Janvier 2007

Un id d'une balise (id="dessous", id="dessus") ne doit être utilisé qu'une seule fois dans la page...au contraire de la classe, qui permet une utilisation multiple.

Autrement dit, cette partie de code est fausse:

<body>
<div id="ess">

<div id="dessous">
<div id="dessus">
<a href="#" alt="">test</a> </div>
</div>

<div id="dessous"> 
<div id="dessus">
<a href="#" alt="">test</a> </div>
</div>

</div>
</body>

Il te faut déjà corriger cela.

xpatval

Connexion

probleme z-index sur divs non imbriquées

Sujets conseillés

phima

ghost

karnabal

dldstyle

xpatval

Veuillez vous connecter pour commenter

Parcourir

Activité