28173 sujets

CSS et mise en forme, CSS3

[résolu]Question par raport à position:absolute.

Bonjours à tous,

j'ai une petite question à vous poser.

Lorsque l'on fait position absolute, on peut définir des marge (top,left,right, bottom) par rapport au block conteneur.

Si je fait par exemple: 


<div id="block1">
    <div id="block2">
    </div>
</div>


Le conteneur du block 2 est bien le block 1 ?

Pourtant si je fait :


<html>
	<head>
	</head>
	<body>
		<div id="block1" style="width:400px; height:400px; background-color:red;">
			<div id="block2" style="width:200px; height:200px; background-color:green;position:absolute;bottom:20px;">
				
			</div>
		</div>
	</body>
</html>


Le block 2 se place 20 px au dessus du bas de la fenetre du navigteur et non pas à 20 px du bas du block 1.

Est-ce normal? Ou bien y'a -t-il quelque chose que je n'ai pas compris?

Merci d'avance Smiley cligne .
Modifié par death83 (09 Dec 2006 - 16:19)
Salut

Par défaut, l'élément en absolu se place par rapport à <body>.

Pour qu'il se positionne par rapport à son parent, il faut que celui-ci soit lui-même positionné. Tu dois définir un nouveau point de repère en ajoutant : 
#block1 {
    position: relative;
}
[Rem] top, left, bottom & right ne définissent pas les marges de l'élément, mais la distance par rapport au bord de son conteneur. ça a l'air pareil quand on pense au côté gauche ou à la partie supérieure de l'élément, mais le résultat d'un "right: 10px" ou d'un "margin-right: 10px;" est en fait très différent Smiley cligne
Merci ,

en effet, c'est ce qu'il me manquait ^^.

Je repart serain et moins bête que tout à l'heure!
Modifié par death83 (09 Dec 2006 - 16:19)
Administrateur
Hello,

Un peu de relecture pour le week-end ?
tutoriel a écrit :
Utiliser les positions absolues, fixes et relatives...
Le bloc est placé par rapport à son parent s'il est lui-même positionné, ou alors par rapport au dernier Ancètre positionné (si aucun Ancètre n'est positionné, il se réfère à la page entière, balise html).
Sujet clos
Aller à