Les positions CSS : Absolute, Relative, Fixed, et Static
ERROR
00:00
00:00

TUTO Les positions CSS : Absolute, Relative, Fixed, et Static

Sébastien Imbert
8,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans ce tuto vidéo, je vous propose de découvrir les positions CSS : absolute, relative, fixed, et static que toute personne qui souhaite faire de l'intégration doit connaître et maîtriser, puisqu'on les retrouve dans toutes les intégrations HTML / CSS.

Au programme de ce tuto dédié aux positions CSS

Le tuto se divise en deux chapitres : un premier dans lequel vous découvrirez le fonctionnement de ces différentes positions, et un second, réservé à la pratique dans des mises en situations concrètes. Au cours d'une série d'exercices, nous verrons qu'elles peuvent nous servir à :

  • fixer des éléments sur le viewport (navigation fixe, boutons de réseaux sociaux)
  • superposer des éléments
  • l'intégration de petits éléments graphiques en utilisant les pseudo éléments :before et :after (décorations sur des titres, icônes sous des liens ..)
  • faciliter l'intégration de manière globale quand elles sont bien utilisées

Le responsive est bien sur prit en compte dans ce tuto, et nous verrons comment gérer le positionnement des éléments sur toutes les résolutions
À la fin de ce tuto vous saurez : non seulement reproduire les exemples présentés, mais aussi vous servir de ces positions lors de toutes vos futures intégrations.

Je reste disponible dans le salon d'entraide pour répondre à vos questions.
 

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Introduction : comprendre comment fonctionne les positions
Chapitre 2
Exercices

Plan détaillé du cours

Chapitre 1 : Introduction : comprendre comment fonctionne les positions
17m20s
 
Leçon 1Les positions absolute et relative
Leçon 2La position fixed
Leçon 3La position static
Chapitre 2 : Exercices
46m58s
 
Leçon 1Positions absolute et relative : superposition d'éléments 1/2
Leçon 2Positions absolute et relative : superposition d'éléments 2/2
Leçon 3Positions absolute et relative : intégration d'éléments graphique 1/3
Leçon 4Positions absolute et relative : intégration d'éléments graphique 2/3
Leçon 5Positions absolute et relative : intégration d'éléments graphique 3/3
Leçon 6Positions absolute et relative : création d'une liste avec des icônes
Leçon 7Position fixed : Fixer une navigation
Leçon 8Exemple d'utilisation de la position static

Aperçus

Avis des apprenants

Détail des avis
420
Apprenants
37
Commentaires
5/5
Note moyenne
5/5
37
4/5
0
3/5
0
2/5
0
1/5
0
Guillaume Duval
Guillaume Duval
Publié le 08/12/2023
très clair et bien expliqué
Jean Villemont
Jean Villemont
Publié le 25/01/2023
super, on a du plaisir à suivre le tuto. Merci !
Alain Tardif
Alain Tardif
Publié le 02/01/2023
Je vous remercie Sébastien, vous m'avez montré comment positionner les éléments sur une page web sans utiliser flexbox ou CSS grid, ce qui était une technique inconnue pour moi. J'ai vraiment apprécié, Merci pour ce cours détaillé et bien expliqué. L'utilisation systématique de l'inspecteur pour tester ou comprendre est certainement adopté. Validé à 100 %.

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

CSS 3

Quel est le niveau requis pour suivre ce tuto ?

débutant

Attendez ! 🤗

Accédez à plus de 1351 tutos gratuits

Notre politique de protection des données