Le positionnement en CSS
CHAPITRE 7
109
Le positionnement absolu
Un élément positionné en absolu est donc placé par rapport à son parent si ce dernier
est lui-même positionné, et sinon par rapport au premier ancêtre positionné, en
remontant au besoin jusqu’à la page entière (élément ). Ce principe fondamental distingue le positionnement absolu du placement dans le flux :
• Un élément positionné dans le flux (en non absolu) prend pour conteneur son
parent le plus proche. Sa position dépend alors de ses propres marges et du
padding de son conteneur.
• Un élément positionné en absolu se reporte au premier ancêtre positionné, qui
joue alors le rôle de conteneur.
Illustrons cette distinction en reprenant l’exemple des deux paragraphes en flux :
auxquels nous appliquerons les styles suivants :
Les deux paragraphes s’affichent dans le flux courant, le bloc vert à la suite de son
frère orange. La boîte de leur parent div leur tient lieu de conteneur global.
Ajouter la déclaration CSS suivante pour éviter un cas de fusion de marges :

div {
width: 300px;
height: 200px;
background: yellow;
}
p#premier {
width: 100px;
background: orange;
}
p#second {
width: 150px;
background: green;
}
p {
margin: 0;
}