Le positionnement en CSS
CHAPITRE 7
111
Il est clair que le second paragraphe ne se place pas en fonction de son parent direct
le bloc
CHAPITRE 7
111
Il est clair que le second paragraphe ne se place pas en fonction de son parent direct
le bloc
, mais par rapport aux extrémités du document entier. En effet, un bloc
absolu se place selon le premier ancêtre positionné, quitte à remonter jusqu’à la racine
du document (l’élément ), toujours considérée comme positionnée.
Pour placer le second paragraphe par rapport au bloc
absolu se place selon le premier ancêtre positionné, quitte à remonter jusqu’à la racine
du document (l’élément ), toujours considérée comme positionnée.
Pour placer le second paragraphe par rapport au bloc
, il suffit de positionner ce
dernier avec une propriété position (en absolu, relatif ou fixe) :
La figure 7-12 représente l’effet ainsi obtenu.
Les propriétés top, right, bottom et left n’ont de sens qu’appliquées à un élément
positionné. Elles n’auront aucun effet sur les éléments placés en flux ou flottants.
Tout élément positionné en absolu est considéré de type bloc. Les éléments en ligne
peuvent ainsi recevoir des dimensions et des bordures.
Le positionnement fixe
C’est un cas particulier du positionnement absolu, où l’élément reste fixe dans la
page, par rapport à la zone de visualisation : il ne se déplace pas lors du défilement de
cette dernière.
div {
position: relative;
width: 300px;
height: 200px;
background: yellow;
}
Figure 7–12
Positionnement
absolu (III)
PRIORITÉS Quelles propriétés l'emportent ?
Pour un élément donné, les propriétés top et bottom sont mutuellement exclusives (top ayant la
priorité). De même, on ne peut préciser simultanément left et right (cette dernière propriété serait
alors ignorée).
dernier avec une propriété position (en absolu, relatif ou fixe) :
La figure 7-12 représente l’effet ainsi obtenu.
Les propriétés top, right, bottom et left n’ont de sens qu’appliquées à un élément
positionné. Elles n’auront aucun effet sur les éléments placés en flux ou flottants.
Tout élément positionné en absolu est considéré de type bloc. Les éléments en ligne
peuvent ainsi recevoir des dimensions et des bordures.
Le positionnement fixe
C’est un cas particulier du positionnement absolu, où l’élément reste fixe dans la
page, par rapport à la zone de visualisation : il ne se déplace pas lors du défilement de
cette dernière.
div {
position: relative;
width: 300px;
height: 200px;
background: yellow;
}
Figure 7–12
Positionnement
absolu (III)
PRIORITÉS Quelles propriétés l'emportent ?
Pour un élément donné, les propriétés top et bottom sont mutuellement exclusives (top ayant la
priorité). De même, on ne peut préciser simultanément left et right (cette dernière propriété serait
alors ignorée).