28173 sujets

CSS et mise en forme, CSS3

Z-index sans position:absolute [Résolu]

Bonjour !

Ma mise en page est basée à l'origine sur le gabarit proposé par Alsacréations, celui avec les colonnes gauche et droite poussant le footer.

L'astuce d'Alsa est de passer ces colonnes en float.

Seulement, dans une de ces colonnes, j'ai une image, sur laquelle j'aimerais superposer une div (pour une option d'outil concernant l'image).
Pour superposer, j'ai utilisé les z-index, et ai dû passer les 2 protagonistes en absolute. La superposition fonctionne, mais, bien que le montage soit dans la div flottante, le footer n'est plus poussé.
Le fait de passer des éléments en absolute les fait "sortir" du flux de la div flottante.
D'où ma question : est-il possible de superposer deux divs sans les placer en absolute ?
Smiley sweatdrop
Modifié par yakou32 (28 Jan 2007 - 13:02)
Bonjour !

La déclaration z-index doit effectivement s'accompagner d'un positionnement des éléments concernés.
Cependant rien n'oblige à ce que ce dernier soit un absolu.

Il peut être : absolute, relative ou fixed.
Dans ton cas, il me semble que ceci serait le plus approprié : 
position:relative;
Merci !

ça avance... mais j'ai encore quelques soucis ; je ne suis pas vraiment un expert du relative.

Voilà où j'en suis : (je cherche à superposer l'image du dessus en haut à gauche)

<div id="dessus" style="z-index:16; position:relative; left:0; top:0;">
Mon image du dessus, de 35px de hauteur
<div id="dessous" style="z-index:0; position:relative; top:-35px;">
Mon image de dessous, de hauteur variable
</div>
</div>


Le positionnement est correct, mais c'est la superposition qui ne l'est pas : malgré les z-index, le "dessus" est dessous.
J'ai préféré câlé le dessous par rapport au-dessus car le positionnement dépend de la hauteur de l'image pour aligner les deux en haut. Or la hauteur de l'image du dessous est variable...
Modifié par yakou32 (27 Jan 2007 - 12:39)
Bonjour,

Ben inverse?

<div id="dessous" style="z-index:0; position:relative;">
/*Mon image de dessous, de hauteur variable*/
<div id="dessus" style="z-index:16; position:absolute; left:0; top:0;">
/*Mon image du dessus, de 35px de hauteur*/
</div>
</div>
En inversant, ça ne fonctionne plus ; les images se repositionnent dans le flux normal, et l'image du dessus apparait à la suite de l'image du dessous.
En effet, en relative, top:0;, l'image du dessus ne bouge pas par rapport au flux normal. Il faudrait la remonter de la hauteur de l'image du dessous. Or, on ne connait pas cette hauteur.
C'est pour cela que je positionne le dessous en relatif par rapport au dessus.

Mais pourquoi le z-index ne fonctionne t-il plus ? Cygnus disait que ça ne fonctionnait pas qu'en absolute, en relative aussi... Or, il semble qu'en relative, ça ne fonctionne pas...
Re,

Je ne comprends pas où est le problème?
<!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: auto;
margin-top: 100px;
background: red;
width: 200px;
height: 200px;
}

#dessus{
position: absolute;
top: 80px;
left: 50%;
margin-left: -20px;
background: yellow;
width: 40px;
height: 40px;
}

</style>
</head>

<body>
<div id="dessous">
	<div id="dessus">
	<a href="#" alt="">test</a>
	</div>
</div>
</body>
</html>
Smiley biggrin

ça y est !

Moi j'ai compris d'où venait le problème !

Ta solution fonctionne car le dessus est en absolu.
Si on le met en relatif, le contenu du dessous se décale.

Donc, le dessus doit-être absolu pour que le contenu du dessous occupe toute la div.

Seulement, chez moi, avec le dessus en absolu, et le dessous en relatif, le dessus sort complètement du flux...
J'ai joué aux sept différences entre les codes, et c'est tout simplement le z-index qui pêche !

Conclusion, pour superposer deux divs sans les mettre en absolute, seule celle du dessous est en relative, et surtout, dans cette option, il faut totalement laisser tomber les z-index !
Cela permet de conserver la div du dessus dans le flux.

Merci du coup de pouce !
Modifié par yakou32 (28 Jan 2007 - 13:02)
Sujet clos
Aller à