CATALOGUE Code & Data Formation Dreamweaver Apprendre Dreamweaver CS5 - Formation Complète

Types de Positionnement CSS : Flottant, Absolu et Relatif

Retour à la formation
Chapitre 4 Leçon 4
Précédent
Suivant

Cette leçon explore les différentes méthodes de positionnement CSS : flottant à gauche, positionnement absolu et positionnement relatif, à travers des exemples pratiques et explicatifs.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous verrons comment positionner des éléments HTML à l'aide des techniques de float left, de positionnement absolu et de positionnement relatif. Nous commencerons par la création de trois éléments de type div avec des styles de fond et de taille distincts pour illustrer chaque méthode de positionnement. Nous discuterons de la manière dont ces éléments se comportent dans le flux et comment changer leur disposition en utilisant les différentes propriétés de positionnement CSS.

En appliquant des propriétés comme float: left aux éléments, vous verrez comment ils se comportement à gauche de leur conteneur parent et comment aligner plusieurs éléments sur une même ligne. Ensuite, nous aborderons le positionnement absolu qui permet de placer un élément par rapport à son parent positionné (ici body ou un élément div nommé contenu). Enfin, nous couvrirons le positionnement relatif où un élément est positionné par rapport à son emplacement normal dans le flux du document sans affecter la position des autres éléments.

Cette démonstration met en évidence la flexibilité du positionnement CSS et permet de mieux comprendre comment ajuster l'agencement des éléments sur une page web en fonction des besoins de conception.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de :

1. Comprendre les différentes méthodes de positionnement CSS.
2. Savoir appliquer les propriétés de float, position absolue et position relative.
3. Apprendre à manipuler les éléments pour obtenir le layout désiré.

Prérequis pour cette leçon

Prérequis :

- Connaissance de base en HTML et CSS.
- Familiarité avec les sélecteurs CSS et les règles de style.

Métiers concernés

Usages professionnels ou métiers :

- Développeur Front-End.
- Designer Web.
- Tout métier nécessitant la création et la gestion de layouts web.

Alternatives et ressources

Logiciels ou solutions alternatives :

- Utilisation des flexbox.
- Appliquer le CSS Grid pour des mises en page plus complexes.

Questions & Réponses

La propriété 'float: left' place l'élément div à gauche de son conteneur parent, permettant aux éléments suivants de se placer à côté de lui s'il y a suffisamment de place.
Un élément en 'position: absolute' se place par rapport à son parent contenant le plus proche qui est lui-même positionné. En l'absence de parent positionné, il se place par rapport à l'élément .
'Position: relative' place un élément par rapport à sa position dans le flux normal du document tandis que 'position: absolute' le place par rapport à son parent positionné, en le retirant du flux normal.