CATALOGUE Code & Data Formation XHTML/CSS Apprendre HTML5 et CSS3 / Part 2 Apprendre le Positionnement Relatif en CSS

Apprendre le Positionnement Relatif en CSS

Propriété pour les blocs - Position relative
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre HTML5 et CSS3 / Part 2
Revoir le teaser Je m'abonne
1,0
Transcription
39,90€ 27,93€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
1,0
39,90€ 27,93€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Comprendre et Appliquer le Positionnement Relatif

Objectifs

Les objectifs de cette vidéo sont de :

  • Comprendre le concept de positionnement relatif en CSS.
  • Apprendre à supprimer les espaces entre des éléments inline.
  • Utiliser les coordonnées left et top pour déplacer des éléments.
  • Distinguer entre le flux normal et les éléments en positionnement relatif.
  • Explorer l'utilisation de la propriété z-index.

Résumé

Cette leçon explique le positionnement relatif en CSS et ses applications pratiques pour une mise en page précise.

Description

Dans cette leçon, nous explorons en détail le positionnement relatif, un concept souvent moins utilisé en CSS, mais très puissant. Nous commençons par voir comment placer des images les unes à côté des autres, en supprimant les espaces indésirables entre elles. Ensuite, nous attribuons des identifiants aux images et appliquons le positionnement relatif pour les déplacer par rapport à leur point d'origine. Nous paramétrons des coordonnées left et top pour contrôler leur emplacement précis. Nous découvrons que, malgré leur déplacement, l'espace initial occupé par ces éléments reste réservé dans le flux du document. Cela mène à une compréhension approfondie sur la manière dont les éléments en positionnement relatif interagissent avec le reste du contenu de la page. Enfin, nous terminons la leçon en abordant l'utilisation potentielle de la propriété z-index pour gérer la superposition des éléments, ce qui est particulièrement utile dans des mises en page complexes.

Voir plus

Questions fréquentes

Pourquoi utiliser le positionnement relatif plutôt que les marges et les padding ?
Le positionnement relatif permet de déplacer des éléments sans affecter leur espace d'origine dans le flux, ce qui est difficile à réaliser avec seulement des marges et des padding.
Quel est l'effet du positionnement relatif sur l'élément parent ?
Le parent ne tient pas compte du déplacement des éléments en positionnement relatif, ce qui peut mener à des dépassements mais assure que l'espace original est réservé.
Quelle est la différence principale entre positionnement relatif et absolu ?
Les éléments en positionnement relatif se déplacent par rapport à leur position d'origine dans le flux, tandis que les éléments en positionnement absolu se déplacent par rapport à leur élément parent positionné.
1 commentaire
1,0
1 vote
5
4
3
2
1
eve.bertieaux
Il y a 3 ans
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