Cours de bureautique

CREATION DE SITE

Création de site - POSITIONNEMENT ABSOLU

Le positionnement absolu

Avec la propriété position : absolute;, l'élément sort du flux pour devenir positionné. Il se décale par rapport à son bloc conteneur grâce aux attributs que l'on définit pour top, right, bottom et left. La boite conteneur de référence est celle du premier élément ancêtre positionné (en relatif, fixe ou absolu).
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.

Ainsi, dans l'exemple qui suit, nous plaçons deux paragraphes dans un div sans les positionner en css.



Si nous positionnons le second paragraphe en top : 0 et left: 0, voici ce que nous obtenons : le second paragraphe prend alors place en haut à gauche du document, sortant meme de la boîte de son parent le bloc div.



Pour positionner le second paragraphe par rapport au bloc div, il suffit de positionner ce dernier par exemple en relative et sans décalage.



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 raport à l'écran. Il ne se déplace pas lorsque la page défile. Cela permet de simuler le comportement des cadres.

copyright 2015 Eléonore Vieytes,
Tous droits de reproduction réservés