Les positionnements relative, absolute et fixed sont mis en pratique dans différentes applications fort utiles pour la composition des pages html.
1 - LE CENTRAGE ABSOLU
2 - LES MENUS DÉROULANTS : Le positionnement absolu par rapport à un élément en position relative est utilisé pour réaliser des menus
déroulants à deux ou plusieurs niveaux.
Les items du premier niveau du menu placés en position relative servent de référence aux items du niveau suivant qui sont placés en
position absolute et peuvent se dérouler sur la page sans déplacer les éléments que celle-ci contient.
3 - LES CADRES FIXES : Le positionnement fixed permet de réaliser dans les pages html, des en-têtes ou des colonnes de menu qui ne suivent pas le défilement de la page et qui offrent un comportement identique à celui des anciennes mises en page en cadres (ou frame).
Seul inconvénient, la propriété position : fixed n'est pas interprétée par les versions d'Internet Explorer antérieures à IE6.
non dimensionné, non positionné
dimensionné
dimensionné
Si les valeurs de top, right, bottom et left ne sont pas précisées, un élément placé en position : relative se comporte
comme s'il était placé dans le flux.
top, right, bottom et left décalent l'élément en position : relative par rapport à la position qu'il occuperait s'il était dans
le flux.
C'est la position initiale dans le flux de l'élément en position : relative qui détermine la position des élément suivants.
fond jaune, Relatif, non positionné : se comporte comme s'il était placé dans le flux
mais n'a pas d'incidence sur les éléments placés après lui
fond vert, position:Relative; left:200px, top:-100px :
positionne l'élément par rapport à l'angle haut-gauche de body
recouvre les autres éléments
n'a pas d'incidence sur les positions des éléments voisins
il suit le défilement de la page
fond bleu, Relatif, droite40px, bas100px
non dimensionné, non positionné
Si le parent n'est pas en position relative, le positionnement de l'élément enfant se détermine par rapport à body
Si les valeurs de top, right, bottom et left ne sont pas précisées, l'élément placé en position : absolute occupe la position qu'il occuperait s'il était placé dans le flux, mais à la différence d'un élément placé en position : relative il n'a pas d'incidence sur les éléments placés après lui.
L'ajout des propriétés top:400px; left:200px; positionne l'élément par rapport à l'angle haut-gauche de body.
L'élément en position : absolute recouvre les autres éléments et n'a pas d'incidence sur les positions des éléments voisins.
L'élément en position : absolute suit le défilement de la page.
Ici, fond jaune-vert, le parent est en position relative
L'élément positionné est en position: absolute; top:200px; left:250px
il se positionne par rapport à l'angle haut gauche de son parent en position relative
il suit le défilement de la page
non dimensionné, non positionné
non dimensionné, non positionné
non dimensionné, non positionné
class="Fixe" style="background:#b7c, top:300px; left:500px"
L'élément en position : fixed (fond mauve)
se positionne par rapport à l'angle haut-gauche de body, dans notre cas, fond mauve, au milieu de l'écran
il reste fixe dans cette position quand on fait défiler la page
L'élément se superpose à tous les autres éléments de la page.