CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3 Utilisation de la Position Fixe en CSS

Utilisation de la Position Fixe en CSS

La position fixed
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre CSS 3
Revoir le teaser Je m'abonne
4,5
Transcription
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,5
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Introduction à la Position Fixe

Objectifs

Les objectifs de cette vidéo sont de comprendre l'utilisation de la position fixe en CSS, de savoir appliquer cette propriété à des éléments de navigation et de retour haut de page, et d'apprendre à gérer les conflits de positionnement avec le z-index.

Résumé

Découvrez comment utiliser la position fixe en CSS pour ancrer des éléments sur votre page web, tels que des barres de navigation et des boutons de retour haut de page.

Description

Cette leçon vous montrera comment utiliser la propriété position fixe en CSS pour fixer des éléments à un endroit spécifique de votre page web. Vous apprendrez à ancrer une barre de navigation en haut de la page, et à créer un bouton de retour haut de page qui reste toujours visible en bas à droite du navigateur.

Nous partirons de la base d'un exercice de positionnement en flex pour appliquer une position fixe à l'élément header, contenant le logo et la navigation. Nous verrons comment ajuster les marges, utiliser les propriétés top, left, right pour le positionnement et ajouter un z-index pour s'assurer que l'élément reste au-dessus d'autres contenus.

Enfin, nous styliserons un bouton de retour haut de page avec des instructions similaires, en fixant sa position et en ajustant son apparence pour qu'il soit toujours accessible à l'utilisateur.

Voir plus

Questions - réponses

Quelle propriété CSS permet de fixer un élément sur la page même lors du défilement ?
La propriété CSS 'position: fixed' permet de fixer un élément à un emplacement spécifique de la page, indépendamment du défilement.
Pourquoi est-il recommandé d'utiliser un z-index élevé avec des éléments en position fixe ?
Utiliser un z-index élevé avec des éléments en position fixe évite que ceux-ci soient cachés par d'autres éléments positionnés relativement ou absolument sur la page.
Quel impact a la propriété 'margin: 0' sur le body dans l'exemple donné ?
La propriété 'margin: 0' sur le body permet de supprimer les marges par défaut autour de l'élément, alignant ainsi le contenu au bord de la fenêtre du navigateur.

Programme détaillé

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 5 months
Commentaire
La formation est divisée en 90 modules sans lien entre eux et sans progression pédagogique. Il faut les réorganiser par thème pour donner plus de cohérence et donner de la progression pédagogique à la formation. Multiples fautes d'orthographe dans les textes.
henridjithat
Il y a 1 year
Commentaire
Très bonne formation, étant débutant j'ai beaucoup appris.
yvan.vogel
Il y a 2 years
Commentaire
J'en suis arrivé au bout.. Un vrai marathon. Très longue formation, à mon avis c'est plutôt 30h de cours et non pas 15h.
Après c'est une formation hyper claire et détaillée. L'auteur a fait un panorama complêt sur le CSS3.
g.vanleynseele
Il y a 3 years
Commentaire
Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !