CSS
TP N°04
Position fixed / static / absolute / relative identifiants 1.

Positionnement « static » ..................................................................................................... 1

2.

Positionnement « relative » .................................................................................................. 2

3.

Positionnement « absolute » ................................................................................................ 4

4.

Identifiants ............................................................................................................................ 6

5.

Positionnement « fixed » ...................................................................................................... 9

Architecture:
-Créer sur votre espace sur le réseau la structure de dossier suivante :

- Créez une structure de base html pour les pages html
- Liez les css respectives

1. Positionnement « static »
La position statique correspond simplement à la valeur par défaut d'un élément du flux. Il n'y a que peu d'intérêt à la préciser, si ce n'est dans le but de rétablir dans le flux un élément en particulier parmi une série qui serait hors flux.
Déclaration css :

Le flux html n’est donc pas impacté par le positionnement static.

Positionnement « static »

1/ 12

cf : nature des balises inline / block

2. Positionnement « relative »
Le positionnement relatif permet de conserver le flux normal de positionnement des éléments de la page mais d’altérer la position du bloc au sein de ce flux. (Plus simplement : ça permet de décaler un élément de sa position d’origine) Exemple :

Toutes ces balises sont des span (inline)

Si l’on décide d’interagir avec le span rouge, en jouant sur le positionnement « relative » il sera possible de le décaler vers le bas / le haut / la gauche ou la droite :

Positionnement « relative »

2/ 12

Notez que l’espace occupé à l’origine reste « vide » :

Déclaration :

Décaler vers le bas
Décaler vers le haut :