Absolute & overflow

Version imprimable

24/11/2008, 20h59
LoKiDemon

Absolute & overflow
Bonjour à tous,

j'ai un soucis dans mon placement de div.
Je voulais faire un div par dessus un autre, le tout dans un div "overflow".

Le soucis c'est que lorsque je mets mon div "par dessus" en position:absolute, il sort du flux et n'est plus pris en charge par l'overflow :

http://img141.imageshack.us/img141/9149/imgpbdivyx7.jpg
Code:

1 2 3 4 <div id="div-global" style="margin:auto; width:90%; height:90%; overflow: auto;"> <div id="div-dessus"></div> <div id="div-dessous"></div> </div>
qu'est ce que je dois mettre comme styles à mes div?

Merci!
24/11/2008, 21h29
Erwan31

Bonsoir,
ton énoncé n'est pas tout à fait cohérent avec l'image jointe et manque de précision (carrés rouges non décrit...)
Pourrais tu donner la totalité du code stp (HTML/CSS)?

Voici une page :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<HTML>
<HEAD>
<TITLE>probleme</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> 
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
<div id="div-global" style="width:500; overflow: auto;"> 
	<div id="div-dessus" style="position:absolute;">
		<TABLE WIDTH="800" BORDER="0" CELLSPACING="10" CELLPADDING="0">
		<TR BGCOLOR="#FF0000"><TD WIDTH="30%"><P>&nbsp;</P><P>&nbsp;</P><P>&nbsp;</P></TD>
		<TD WIDTH="30%">Au dessus</TD><TD>&nbsp;</TD></TR></TABLE>
	</div>
	<div id="div-dessous">
		<TABLE WIDTH="800" BORDER="1" CELLSPACING="10" CELLPADDING="0">
		<TR BGCOLOR="#FF0000"><TD WIDTH="30%" BGCOLOR="#0099FF"><P>&nbsp;</P><P>&nbsp;</P><P>&nbsp;</P></TD></TR>
		<TR BGCOLOR="#FF0000"><TD WIDTH="30%" BGCOLOR="#0099FF" ALIGN="CENTER"><P><BR>En dessous<BR></P></TD></TR>
		<TR BGCOLOR="#FF0000"><TD WIDTH="30%" BGCOLOR="#0099FF"><P>&nbsp;</P><P>&nbsp;</P></TD></TR>
		</TABLE>
	</div>
</div>
</BODY>
</HTML>

Je veux que le div "au dessus" en rouge soit dans le div "global" (en overflow).
Voir mon image en haut. Là il est par dessus tout. :( Il doit etre par dessus celui en bleu et c'est tout.

25/11/2008, 17h30
RomainVALERI

ton titre m'intrigue... : z-order ? oO

n'est-ce pas plutôt z-index, la propriété qui permet de déterminer la "hauteur" d'affichage (relative à d'autres éléments de la page, pour gérer correctement les chevauchements) ?

en règlant correctement les propriétés z-index de tes éléments se chevauchant, ça devrait aller mieux, jette un oeil la-dessus : référence CSS2 @W3C pour z-index

Oui bien vu, j'ai pas fait gaffe.

Quoi qu'il en soit le problème n'est pas dans le z-index.
Il est dans le position:absolute, qui fait sortir mon div "dessus" de son div.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<HTML>
<HEAD>
<TITLE>probleme</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> 
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
<div id="div-global" style="width:500; overflow: auto;"> 
	<div id="div-dessus" style="position:absolute; z-index:1;">
		<TABLE WIDTH="800" BORDER="0" CELLSPACING="10" CELLPADDING="0">
		<TR BGCOLOR="#FF0000"><TD WIDTH="30%"><P>&nbsp;</P><P>&nbsp;</P><P>&nbsp;</P></TD>
		<TD WIDTH="30%">Au dessus</TD><TD>&nbsp;</TD></TR></TABLE>
	</div>
	<div id="div-dessous" style="z-index:0;">
		<TABLE WIDTH="800" BORDER="1" CELLSPACING="10" CELLPADDING="0">
		<TR BGCOLOR="#FF0000"><TD WIDTH="30%" BGCOLOR="#0099FF"><P>&nbsp;</P><P>&nbsp;</P><P>&nbsp;</P></TD></TR>
		<TR BGCOLOR="#FF0000"><TD WIDTH="30%" BGCOLOR="#0099FF" ALIGN="CENTER"><P><BR>En dessous<BR></P></TD></TR>
		<TR BGCOLOR="#FF0000"><TD WIDTH="30%" BGCOLOR="#0099FF"><P>&nbsp;</P><P>&nbsp;</P></TD></TR>
		</TABLE>
	</div>
</div>
</BODY>
</HTML>

Je cherche simplement un moyen de faire des div les uns sur les autres, et de mettre le tout dans un div plus petit que son contenu (avec des ascenseurs donc). Mais sans utiliser d'iframe ! :?

26/11/2008, 11h48
devyan

pour avoir les ascenseurs seulement si nécessaire il faut utiliser "overflow:auto" au lieu de "overflow:hidden"
26/11/2008, 15h38
LoKiDemon

Code:

<div id="div-global" style="width:500; overflow: auto;">

Bah c'est déjà en overflow:auto, cf mon code juste au dessus.
Là n'est pas le problème, c'est une question sur le mode de positionnement à mon sens.

Dans la doc de position:absolute, il est clairement spécifié :

Citation:

absolute = Positionnement absolu, mesuré à partir du bord de l'élément parent; peut défiler.

Effectivement, mon div "dessus" est placé à partir de l'élément parent.
En revanche, le overflow:auto bousille tout. Mon élément par "dessus" n'est pas impacté par l'overflow, il est par dessus tout.
26/11/2008, 17h09
devyan

Lorsque tu défini un élément en "position:absolute" il est placé par rapport au premier élément non "static" présent dans "sa généalogie".

Si tu ne précise jamais "position" sur tes éléments alors les éléments "absolute" seront placés par rapport à BODY. (cf. le positionnement des cadres en CSS)
26/11/2008, 18h15
LoKiDemon

Bien joué!

C'était ça, il fallait définir la position de mon div "overflow".

Merci bcp! :king: