Il y a 2 years
Commentaire
C'est vraiment dommage que lors de la démonstration HTML et CSS soient mélangés, je ne sais plus à un moment donné si c'est dans l'un ou l'autre, du coup je n'ai pas le résultat attendu
DescriptionProgrammeAvis
Comprendre et Utiliser le Positionnement Absolu pour Manipuler les Éléments HTML
Objectifs
À 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.
Résumé
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.
Description
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.
Questions - réponses
Questions réponses
Pourquoi les images se sont-elles superposées au début de la leçon ?
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.
Comment un élément en positionnement relatif affecte-t-il ses éléments enfants en positionnement absolu ?
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.
Quelle est la fonction de la propriété ZIndex en CSS ?
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.
Programme détaillé
Module 1 - Introduction à la formation HTLM5 et CSS3
Module 2 - Les bases de feuilles de style
Module 3 - Les bases des propriétés de style ou les principales propriété de style
Propriétés de bordures
02:19
Propriétés d'affichage
05:51
Les couleurs en CSS
05:36
Le centrage des éléments
03:43
1 commentaire
1,0
1 vote
5
4
3
2
1
Formation ajoutée au panier
Apprendre HTML5 et CSS3 / Part 2
- Tuto CSS3: Les Feuilles de Style
Formateur expert
Accès sur tous vos appareils
Fichiers de travail téléchargeables