Aller au contenu

probleme z-index sur divs non imbriquées


phima

Sujets conseillés

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|

|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>

Lien vers le commentaire
Partager sur d’autres sites

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. ;)

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...