CATALOGUE Code & Data Formation XHTML/CSS Apprendre HTML5 et CSS3 / Part 2 - Tuto CSS3: Les Feuilles de Style

Apprenez le Positionnement Absolu en CSS

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

Dans cette leçon, nous allons explorer le positionnement absolu en CSS, la manière de superposer des images et comment les aligner avec précision.

Détails de la leçon

Description de la leçon

Cette leçon propose une introduction détaillée au positionnement absolu en CSS. Nous commencerons par la création d'un document HTML de base contenant trois images. En appliquant les propriétés de positionnement, nous montrerons comment les images se superposent lorsque les mêmes coordonnées sont utilisées. Ensuite, nous verrons comment déplacer chacune d'elles en modifiant leurs positions à l'aide des propriétés top et left.

Nous examinerons également la relation entre les éléments en positionnement absolu et leurs éléments parents. Nous démontrerons comment un élément en positionnement relatif peut servir de référent pour les éléments enfants positionnés en absolu et comment cela impacte leur placement.

La leçon abordera aussi la propriété ZIndex pour contrôler l'ordre d'empilement des éléments. En modifiant le z-index de chaque image, nous pourrons changer leur ordre de superposition, garantissant ainsi un meilleur contrôle visuel.

Objectifs de cette leçon

À la fin de cette leçon, vous serez capable de :

  • Utiliser le positionnement absolu en CSS pour manipuler des éléments HTML.
  • Comprendre l'impact des coordonnées top et left sur la position des éléments.
  • Utiliser la propriété ZIndex pour gérer l'ordre de superposition des éléments.

Prérequis pour cette leçon

Connaissance de base en HTML et CSS est requise.

Métiers concernés

Les compétences abordées dans cette leçon sont essentielles pour :

  • Développeurs front-end
  • Web designers
  • Intégrateurs HTML/CSS

Alternatives et ressources

Pour ceux qui préfèrent utiliser des frameworks, Bootstrap ou Tailwind CSS peuvent offrir des alternatives simplifiées.

Questions & Réponses

Les images se sont superposées car elles avaient les mêmes coordonnées top et left (0,0) en positionnement absolu, ce qui les a placées au même endroit sur l'élément parent Body.
Un élément en positionnement relatif sert de référent pour les éléments enfants en positionnement absolu, offrant une nouvelle base de coordonnées pour le placement des enfants.
La propriété ZIndex détermine l'ordre de superposition des éléments. Plus l'indice est élevé, plus l'élément se trouve devant les autres.