## Tâche
Créer une barre de navigation de site web qui reste **fixée en haut** de la page afin que les utilisateurs puissent y accéder à tout moment.
Étapes :
1. Appliquer la position `fixed` à la liste de navigation.
2. Choisir une propriété pour le déplacement horizontal (`left` ou `right`).
3. Choisir une propriété pour le déplacement vertical (`top` ou `bottom`).
4. Vérifier la fonctionnalité en cliquant sur différents liens et en s'assurant que la page défile tout en gardant la barre de navigation visible.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDx1bCBjbGFzcz0ibmF2aWdhdGlvbiI+CiAgICAgIDxsaSBjbGFzcz0ibmF2aWdhdGlvbi1pdGVtIj4KICAgICAgICA8YSBocmVmPSIjaG9tZSIgY2xhc3M9Im5hdmlnYXRpb24tbGluayI+SG9tZTwvYT4KICAgICAgPC9saT4KICAgICAgPGxpIGNsYXNzPSJuYXZpZ2F0aW9uLWl0ZW0iPgogICAgICAgIDxhIGhyZWY9IiNhYm91dCIgY2xhc3M9Im5hdmlnYXRpb24tbGluayI+QWJvdXQ8L2E+CiAgICAgIDwvbGk+CiAgICAgIDxsaSBjbGFzcz0ibmF2aWdhdGlvbi1pdGVtIj4KICAgICAgICA8YSBocmVmPSIjcHJpY2UiIGNsYXNzPSJuYXZpZ2F0aW9uLWxpbmsiPlByaWNlPC9hPgogICAgICA8L2xpPgogICAgICA8bGkgY2xhc3M9Im5hdmlnYXRpb24taXRlbSI+CiAgICAgICAgPGEgaHJlZj0iI3RlYW0iIGNsYXNzPSJuYXZpZ2F0aW9uLWxpbmsiPlRlYW08L2E+CiAgICAgIDwvbGk+CiAgICA8L3VsPgogICAgPHNlY3Rpb24gY2xhc3M9InNlY3Rpb24iIGlkPSJob21lIj4KICAgICAgPGgyIGNsYXNzPSJzZWN0aW9uLXRpdGxlIj5Ib21lIHNlY3Rpb248L2gyPgogICAgICA8cCBjbGFzcz0idGV4dCI+CiAgICAgICAgTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gVGVtcG9yYQogICAgICAgIHBvc3NpbXVzIHByYWVzZW50aXVtIG9wdGlvIHBlcmZlcmVuZGlzIHRlbXBvcmlidXMgc3VzY2lwaXQgZWEgYXQgbmVtbwogICAgICAgIGRvbG9ydW0gZXNzZSBzZWQgdWxsYW0gc3VudCwgZW9zIHJhdGlvbmUgaXBzYW0gdm9sdXB0YXRpYnVzIG1pbmltYQogICAgICAgIG1heGltZSBhcGVyaWFtIGhhcnVtIGFkaXBpc2NpIG1hZ25hbS4gRWFxdWUgbmVxdWUsIGVuaW0gaXVzdG8gdmVsIHVuZGUKICAgICAgICBxdW8gaXVyZSBtYWduaSwgc2ltaWxpcXVlIHBlcmZlcmVuZGlzIGRvbG9yZW0sIGFyY2hpdGVjdG8gcGFyaWF0dXIgZXJyb3IKICAgICAgICBibGFuZGl0aWlzIG5lY2Vzc2l0YXRpYnVzLiBVdCBhbGlhcyBpbmNpZHVudCBkb2xvcmlidXMgdGVtcG9yYSBpdXN0bwogICAgICAgIGV4cGxpY2FibyBtb2xsaXRpYSBjdXBpZGl0YXRlIHZvbHVwdGF0aWJ1cyBxdWlidXNkYW0gcmVpY2llbmRpcwogICAgICAgIHZvbHVwdGF0ZSBhdCBpcHN1bSByYXRpb25lIGN1bXF1ZSBjb21tb2RpIGRlYml0aXMgZW9zIHBvc3NpbXVzLCBub3N0cnVtCiAgICAgICAgY29ycG9yaXMgbmVzY2l1bnQgbnVsbGEhCiAgICAgIDwvcD4KICAgIDwvc2VjdGlvbj4KICAgIDxzZWN0aW9uIGNsYXNzPSJzZWN0aW9uIiBpZD0iYWJvdXQiPgogICAgICA8aDIgY2xhc3M9InNlY3Rpb24tdGl0bGUiPkFib3V0IHNlY3Rpb248L2gyPgogICAgICA8cCBjbGFzcz0idGV4dCI+CiAgICAgICAgTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gQWxpcXVhbSByZXJ1bQogICAgICAgIHNpbWlsaXF1ZSBhY2N1c2FudGl1bSBwb3JybywgZGVsZWN0dXMgZG9sb3JlbXF1ZSBvZmZpY2lhIGRvbG9yZW0gYXBlcmlhbQogICAgICAgIGFzcGVyaW9yZXMgbGF1ZGFudGl1bSBwYXJpYXR1ciB0ZW1wb3JlIGFsaXF1aWQgdG90YW0gcXVvIGF0PyBRdWlidXNkYW0KICAgICAgICBuaXNpIGRpZ25pc3NpbW9zIG9mZmljaWEgZnVnYSB2b2x1cHRhdHVtIGludmVudG9yZSBkb2xvciwgb2RpbyBleCBxdWlkZW0KICAgICAgICBuYXR1cyBlc3QgaW1wZWRpdC4gUXVpZGVtIGN1bXF1ZSBwZXJmZXJlbmRpcyBpbmNpZHVudCBjdW0gcG9ycm8sCiAgICAgICAgZXhwbGljYWJvIGZhY2lsaXMgcXVhbSByZXBlbGxlbmR1cyBpdXN0byBpZCBwbGFjZWF0IGF1dCBpc3RlIGFkaXBpc2NpCiAgICAgICAgb21uaXMgdmVybyBpdGFxdWUgZGViaXRpcywgcmVydW0sIG9wdGlvIHJlY3VzYW5kYWUgbW9sZXN0aWFzIHF1aXMKICAgICAgICBtb2xlc3RpYWUuIEludmVudG9yZSB2b2x1cHRhdGVzIG51bGxhIHNlcXVpIHNhcGllbnRlIHRlbXBvcmlidXMgZmFjaWxpcwogICAgICAgIGRvbG9yZW1xdWUgbmVxdWUgY29ycnVwdGkgdGVtcG9yZSBhIHJlaWNpZW5kaXMgZXVtIHZlbGl0LCBldCBhbmltaQogICAgICAgIGV4cGxpY2FibyBuYW0gZWFxdWUgYWIgdm9sdXB0YXRlIGV2ZW5pZXQgbm9uIGFkaXBpc2NpIGZ1Z2l0IGF0LiBRdWlkZW0sCiAgICAgICAgcGxhY2VhdCBuaXNpLgogICAgICA8L3A+CiAgICA8L3NlY3Rpb24+CiAgICA8c2VjdGlvbiBjbGFzcz0ic2VjdGlvbiIgaWQ9InByaWNlIj4KICAgICAgPGgyIGNsYXNzPSJzZWN0aW9uLXRpdGxlIj5QcmljZSBzZWN0aW9uPC9oMj4KICAgICAgPHAgY2xhc3M9InRleHQiPgogICAgICAgIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0IGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIFZlbCB0ZW1wb3JpYnVzCiAgICAgICAgcmVwcmVoZW5kZXJpdCB2b2x1cHRhdHVtIGRvbG9yaWJ1cyBpbmNpZHVudCBsYXVkYW50aXVtISBRdW9zIGlsbG8KICAgICAgICBub3N0cnVtIGFyY2hpdGVjdG8gZHVjaW11cyBleHBsaWNhYm8sIHZvbHVwdGFzIHV0IGVhcnVtIHZlcm8uCiAgICAgICAgQ29uc2VxdWF0dXIgY29ycG9yaXMgcXVvZCBleGVyY2l0YXRpb25lbSBhdXRlbSBjb25zZWN0ZXR1ciBhdHF1ZQogICAgICAgIGFkaXBpc2NpIHZlcm8sIGlzdGUgY3VtcXVlIGFtZXQgZG9sb3Jlcy4gQXV0IG1hZ25pIHJlaWNpZW5kaXMgc3VudAogICAgICAgIGRlc2VydW50IGltcGVkaXQgZHVjaW11cyBpcHN1bSBhbGlxdWlkIHVsbGFtIG9kaXQgdG90YW0gbmFtIG9tbmlzCiAgICAgICAgZG9sb3JlbXF1ZSBmdWdpdCwgb3B0aW8gc2VxdWkgcmVwdWRpYW5kYWUsIGV4cGxpY2FibyBwcmFlc2VudGl1bQogICAgICAgIHBvc3NpbXVzIGN1cGlkaXRhdGUgbmVjZXNzaXRhdGlidXMgbW9kaSBpbnZlbnRvcmUgYWNjdXNhbnRpdW0gbWFnbmFtCiAgICAgICAgbmloaWwuCiAgICAgIDwvcD4KICAgIDwvc2VjdGlvbj4KICAgIDxzZWN0aW9uIGNsYXNzPSJzZWN0aW9uIiBpZD0idGVhbSI+CiAgICAgIDxoMiBjbGFzcz0ic2VjdGlvbi10aXRsZSI+VGVhbSBzZWN0aW9uPC9oMj4KICAgICAgPHAgY2xhc3M9InRleHQiPgogICAgICAgIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBOZXF1ZSBhZCwKICAgICAgICBuZXNjaXVudCB2b2x1cHRhcyBhYiBmYWNpbGlzIHNvbHV0YSBxdW9kIHJlcGVsbGF0IGlkPyBPbW5pcyBpbmNpZHVudAogICAgICAgIG9mZmljaWEgc3VzY2lwaXQgZGViaXRpcyByZXB1ZGlhbmRhZSBtb2xsaXRpYSBtYXhpbWUuIFNpbWlsaXF1ZSBtb2RpCiAgICAgICAgdm9sdXB0YXRlbSwgZG9sb3JlbXF1ZSBlaXVzIHByb3ZpZGVudCBwbGFjZWF0IHF1YWVyYXQgbm9iaXMsIHJlaWNpZW5kaXMKICAgICAgICBxdWFzIHJlcGVsbGF0IHJlcGVsbGVuZHVzIGVvcyBjdW1xdWUgb3B0aW8gY29ycnVwdGkgYWIgc2FwaWVudGUKICAgICAgICBtb2xlc3RpYXMgZXNzZSBwb3JybyBzZWQgcGFyaWF0dXIgYmxhbmRpdGlpcyBxdWFtLiBDdW0sIG9tbmlzPyBFcnJvcgogICAgICAgIHByb3ZpZGVudCBtb2xlc3RpYXMgaXN0ZSBhZD8gUXVpIHNhcGllbnRlIHRvdGFtIG9iY2FlY2F0aSBpcHN1bS4KICAgICAgPC9wPgogICAgPC9zZWN0aW9uPgogIDwvYm9keT4KPC9odG1sPg==

Lm5hdmlnYXRpb24gewogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBwYWRkaW5nOiAxMHB4OwogIGJhY2tncm91bmQtY29sb3I6ICNkNjQzNDM7CiAgd2lkdGg6IDEwMCU7Cn0KCi5uYXZpZ2F0aW9uIHsKICAvKiAtLS0tLS0tLS0tLS0tLS0gTWFrZSBjaGFuZ2VzIGJlbG93IHRoaXMgbGluZSAtLS0tLS0tLS0tLS0tLS0gKi8KICBwb3NpdGlvbjogX19fOwogIF9fXzogX19fOwogIF9fXzogX19fOwogIC8qIC0tLS0tLS0tLS0tLS0tLSBNYWtlIGNoYW5nZXMgYWJvdmUgdGhpcyBsaW5lIC0tLS0tLS0tLS0tLS0tLSAqLwp9CgovKiBOb3QgdGhlIGN1cnJlbnQgZm9jdXMgKi8KKiB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQoKaHRtbCB7CiAgc2Nyb2xsLWJlaGF2aW9yOiBzbW9vdGg7Cn0KCi5zZWN0aW9uIHsKICBtYXJnaW46IDAgYXV0bzsKICBwYWRkaW5nOiAyMHB4IDMwcHg7CiAgYmFja2dyb3VuZC1jb2xvcjogbGlnaHRibHVlOwp9Cgouc2VjdGlvbjpub3QoOmxhc3QtY2hpbGQpIHsKICBtYXJnaW4tYm90dG9tOiAzMHB4Owp9Cgp1bCB7CiAgcGFkZGluZy1sZWZ0OiAwOwogIG1hcmdpbi10b3A6IDA7CiAgbWFyZ2luLWJvdHRvbTogMDsKICBsaXN0LXN0eWxlOiBub25lOwp9CgoubmF2aWdhdGlvbi1pdGVtOm5vdCg6bGFzdC1jaGlsZCkgewogIG1hcmdpbi1yaWdodDogMzBweDsKfQoKLm5hdmlnYXRpb24tbGluayB7CiAgdGV4dC1kZWNvcmF0aW9uOiBub25lOwogIGNvbG9yOiByZ2IoMjEyLCAyMDMsIDEyMCk7Cn0KCi5zZWN0aW9uLXRpdGxlIHsKICB0ZXh0LWFsaWduOiBjZW50ZXI7CiAgY29sb3I6IGRhcmtncmVlbjsKfQoKLnRleHQgewogIGZvbnQtc2l6ZTogMThweDsKICB0ZXh0LWFsaWduOiBqdXN0aWZ5Owp9

1. Définir la propriété `top` à `0` pour maintenir la navigation en haut de la page web.
2. Pour le positionnement horizontal, utiliser soit `left: 0;` pour l’aligner avec le bord gauche de la fenêtre, soit `right: 0;` pour l’aligner avec le bord droit.

Lm5hdmlnYXRpb24gewogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBwYWRkaW5nOiAxMHB4OwogIGJhY2tncm91bmQtY29sb3I6ICNkNjQzNDM7CiAgd2lkdGg6IDEwMCU7Cn0KCi5uYXZpZ2F0aW9uIHsKICBwb3NpdGlvbjogZml4ZWQ7CiAgdG9wOiAwOwogIGxlZnQ6IDA7Cn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwoqIHsKICBib3gtc2l6aW5nOiBib3JkZXItYm94Owp9CgpodG1sIHsKICBzY3JvbGwtYmVoYXZpb3I6IHNtb290aDsKfQoKLnNlY3Rpb24gewogIG1hcmdpbjogMCBhdXRvOwogIHBhZGRpbmc6IDIwcHggMzBweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiBsaWdodGJsdWU7Cn0KCi5zZWN0aW9uOm5vdCg6bGFzdC1jaGlsZCkgewogIG1hcmdpbi1ib3R0b206IDMwcHg7Cn0KCnVsIHsKICBwYWRkaW5nLWxlZnQ6IDA7CiAgbWFyZ2luLXRvcDogMDsKICBtYXJnaW4tYm90dG9tOiAwOwogIGxpc3Qtc3R5bGU6IG5vbmU7Cn0KCi5uYXZpZ2F0aW9uLWl0ZW06bm90KDpsYXN0LWNoaWxkKSB7CiAgbWFyZ2luLXJpZ2h0OiAzMHB4Owp9CgoubmF2aWdhdGlvbi1saW5rIHsKICB0ZXh0LWRlY29yYXRpb246IG5vbmU7CiAgY29sb3I6IHJnYigyMTIsIDIwMywgMTIwKTsKfQoKLnNlY3Rpb24tdGl0bGUgewogIHRleHQtYWxpZ246IGNlbnRlcjsKICBjb2xvcjogZGFya2dyZWVuOwp9CgoudGV4dCB7CiAgZm9udC1zaXplOiAxOHB4OwogIHRleHQtYWxpZ246IGp1c3RpZnk7Cn0=

Améliorez vos compétences en stylisation en maîtrisant des techniques CSS avancées pour la conception web moderne. Positionnez et gérez les éléments avec précision grâce à des stratégies de positionnement avancées. Créez des transitions fluides et des animations engageantes pour optimiser l'expérience utilisateur. Transformez et manipulez les éléments pour des effets visuels dynamiques. Concevez des mises en page réactives qui s'adaptent à tous les appareils et apprenez à rationaliser votre flux de travail avec des préprocesseurs CSS comme Sass.

Découvrez ce que les apprenants peuvent attendre de ce cours avancé sur la mise en forme HTML et CSS. Prérequis nécessaires avant de commencer le cours. Aperçu des sujets abordés au sein du programme.

Positionnement et gestion des éléments sur les pages web. Présentation des différentes propriétés de positionnement, exploration de l'utilisation de l'ordre d'empilement pour contrôler la visibilité des éléments qui se chevauchent, et gestion du dépassement de contenu.

Étude de la puissance des transitions et amélioration de l'expérience utilisateur. Découverte de l'animation fluide et progressive des propriétés pour créer des transitions d'état sans rupture.

Découvrez la propriété animation et son utilisation pour créer des conceptions dynamiques et attrayantes. Apprenez à réaliser des animations complexes à l'aide de keyframes et à contrôler l'animation.

Découvrez la propriété de transformation, qui permet de modifier l'apparence et la position des éléments sur une page web. Apprenez à mettre à l'échelle, faire pivoter, incliner et déplacer des éléments en deux et trois dimensions. Combinez plusieurs transformations pour créer des effets plus complexes.

Les principes et techniques utilisés dans la conception adaptative/réactive visent à rendre les sites web et les applications accessibles et esthétiques sur différents appareils, tailles d'écran et orientations.

Découvrez les préprocesseurs en CSS et comment ils permettent d’écrire un code plus efficace et maintenable. Comprenez comment utiliser les préprocesseurs pour simplifier le flux de travail et générer un code CSS plus propre.

Défi : Travailler Avec le Positionnement Fixe

Tâche

Awesome!

Défi : Travailler Avec le Positionnement Fixe

Tâche