CSS AbsoluteRelative

Pages: 4 (942 mots) Publié le: 12 octobre 2015
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 leré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 à lavaleur 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 »
Lepositionnement 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 saposition
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écalervers 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...
Lire le document complet

Veuillez vous inscrire pour avoir accès au document.

Vous pouvez également trouver ces documents utiles

  • td css
  • Bep css
  • Bep css
  • Synthèse css
  • Bep css
  • Scénario css
  • Css pour débutant
  • Bep css

Devenez membre d'Etudier

Inscrivez-vous
c'est gratuit !