50
Maîtrise des CSS
#myBox {
position: relative;
left: 20px;
top: 20px;
}
Figure 3.10
Positionnement
relatif d’un
élément.
top : 20px
left : 20px
position : relative
élément conteneur
boîte 1
boîte 2
boîte 3
Avec.le.positionnement.relatif,.l’élément.continue.d’occuper.l’espace.d’origine,.qu’il.soit.
décalé.ou.non..Le.décalage.peut.dès.lors.le.conduire.à.chevaucher.d’autres.boîtes.
Positionnement absolu
Le.positionnement.relatif.est.considéré.faire.partie.du.modèle.de.positionnement.standard.
dans. le. flux,. car. la. position. de. l’élément. est. alors. relative. à. la. position. normale. dans. le.
flux..À la.différence,.le.positionnement.absolu.extrait.l’élément.du.flux.du.document..Il.n’y.
occupe.donc.plus.d’espace,.et.les.autres.éléments.dans.le.flux.se.comportent.alors.comme.si.
l’élément.positionné.de.manière.absolue.n’existait.pas.(voir.Figure 3.11).
Figure 3.11
Positionnement absolu
d’un élément.
ancêtre positionné de manière relative
boîte 1
boîte 3
top : 20px
left : 20px
position : absolue
boîte 2
Un.élément.positionné.de.manière.absolue.est.positionné.par.rapport.l’emplacement.de.son.
ancêtre.le.plus.proche..S’il.n’en.possède.pas,.il.est.positionné.par.rapport.au.bloc.conteneur.initial..Selon.l’agent.utilisateur,.il.peut.s’agit.du.support.du.document.ou.de.l’élément.
HTML.