CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3

Maîtriser le Positionnement Absolu en CSS

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

Découvrez comment utiliser la propriété de positionnement absolu en CSS pour positionner avec précision des éléments sur une page web.

Détails de la leçon

Description de la leçon

La propriété de positionnement absolu en CSS permet de placer des éléments à des endroits exacts sur une page web, indépendamment du flux normal du document. Cette leçon explique comment les éléments positionnés en absolu se placent par rapport à leur parent positionné en relatif ou par rapport au body. Vous apprendrez également à utiliser les propriétés top, right, bottom et left pour ajuster la position des éléments.

Nous montrerons comment superposer du texte sur une image en utilisant du CSS et du HTML. Nous aborderons également l'utilisation de la propriété vertical-align pour éliminer les espaces blancs indésirables autour des images et des éléments inline. Enfin, nous verrons comment utiliser les couleurs RGBA pour ajouter de la transparence aux arrière-plans.

Objectifs de cette leçon

À la fin de cette vidéo, vous saurez :
- Utiliser la propriété position absolue
- Positionner des éléments par rapport à leur parent
- Supprimer les espaces blancs autour des éléments inline
- Appliquer des couleurs avec transparence (RGBA)

Prérequis pour cette leçon

Pour suivre cette vidéo, vous devriez avoir des connaissances de base en HTML et CSS.

Métiers concernés

Les connaissances abordées dans cette leçon sont particulièrement utiles pour les développeurs front-end, les intégrateurs web et les designers web.

Alternatives et ressources

En dehors de CSS, des frameworks comme Bootstrap ou des bibliothèques CSS comme Tailwind CSS offrent des fonctionnalités pour simplifier le positionnement des éléments.

Questions & Réponses

L'élément se positionne par rapport à la balise body.
Nous utilisons les propriétés top, right, bottom et left.
En utilisant la valeur rgba pour la propriété background-color.