Positions CSS pour les débutants – Cours Udemy gratuits
Éditeur : Norhan Khafaga
Durée du cours :
->
Langue du cours : Anglais
La description
Les positions CSS sont les propriétés utilisées pour placer les éléments html à n’importe quel endroit de la page Web. La propriété Position permet aux développeurs de créer une mise en page complexe qui ne peut pas être réalisée par des flotteurs, même flexibles.
La propriété position peut vous aider à manipuler l’emplacement d’un élément à l’aide d’autres propriétés css.
En utilisant cette propriété, vous pouvez choisir si l’élément doit être positionné selon le flux normal de la page (par défaut), vous pouvez déplacer sa position ou le «pousser» tout en conservant sa position dans le flux, vous pouvez le positionner par rapport à un autre élément sur la page, ou vous pouvez le positionner par rapport à la fenêtre.
Un élément peut prendre cinq valeurs de position: statique, relative, absolue, fixe et collante.
, dont chacun a un effet différent sur l’élément.
Tous les éléments sont par défaut positionnés «statiquement» sur une page. Une position statique définit la position d’un élément dans le flux normal de la page. C’est la position par défaut de chaque élément. Lorsqu’un élément est appelé élément positionné, cela signifie que sa position est passée de statique à l’une des quatre valeurs disponibles: relative, absolue, fixe, collante.
De nouvelles valeurs de position ont été ajoutées dans css3.
Dans ce tutoriel, nous apprendrons tout sur les positions par des exemples pratiques.
Les exemples que nous allons créer:
-
Barre latérale fixe
-
Boîte de médias sociaux.
-
Superposition pour la section.
-
Carte d’image.
-
Barre de menus avec sous-menu.
-
Barre de navigation fixe.
-
Carte de vente.
-
Beaucoup plus.
Les étudiants doivent avoir des connaissances de base en html et css pour comprendre les exemples.
Il y a beaucoup de propriétés css qui fonctionnent avec les positions ou, en un autre mot, font que la propriété de position a sa force.
ces propriétés sont: haut, bas, gauche, droite et z-index.
Nous découvrirons également ces propriétés.