Support de cours - Lita

Statique (static) Le positionnement statique est le positionnement par défaut. Il
s’obtient en fixant la valeur static à la propriété position de l’élément ciblé par la
règle Css. Par exemple pour les paragraphes :
p {
}
position: static;
Cette valeur de la propriété position est utile afin de revenir au comportement par
défaut (flux normal). Elle est très peu utilisée.
Relatif (relative) Le positionnement relatif permet de placer un élément par rapport
à l’emplacement qu’il aurait eu dans le flux normal, en introduisant un décalage par
rapport aux côtés de sa boîte par défaut (top, right, bottom, left). La place qu’il
aurait occupé dans le flux normal est conservée. Par exemple sur le document Html
précédent :
strong {
}
position: relative;
top: 20px;
left: 30px;
Attention : l’élément ainsi « décalé » peut chevaucher d’autres éléments, et les masquer
en partie.
Remarque Le positionnement relatif est souvent utilisé avec des valeurs nulles (0)
aux propriétés top, bottom, etc. afin d’utiliser l’élément comme bloc conteneur (voir
positionnement absolu ci-après).
Fixé (fixed) Le positionnement fixé consiste à positionner un élément par rapport
à la zone d’affichage entière : même si l’on fait défiler la page, l’élément reste à sa
place ; il ne défile pas.
32