date: 2023-09-26
Type: Cours
Projet: Blindcode
Cours: CSSCSS : Le positionnement
Il est important de savoir positionner vos éléments par rapport à un autre, lorsque vous voudrez faire des mise en page particulière, ce chapitre vous aidera à ceci !
Le positionnement en CSS vous permet de contrôler la façon dont les éléments HTML sont affichés et positionnés sur une page web. Il existe plusieurs valeurs de la propriété position qui définissent le type de positionnement d'un élément.
position: relative;)Lorsque vous définissez position: relative; sur un élément, cet élément est positionné par rapport à sa position normale dans le flux du document. Vous pouvez ensuite utiliser les propriétés top, right, bottom et left pour déplacer l'élément par rapport à sa position d'origine. Cela n'affecte pas la mise en page des autres éléments.
Exemple :
/* Déplace un élément de 20 pixels vers le bas et de 10 pixels vers la gauche par rapport à sa position d'origine */
div {
position: relative;
top: 20px;
left: -10px;
}
position: absolute;)Lorsque vous définissez position: absolute; sur un élément, cet élément est positionné par rapport au premier ancêtre positionné qu'il rencontre (un ancêtre avec position: relative;, position: absolute;, ou position: fixed;). Si aucun ancêtre positionné n'est trouvé, l'élément sera positionné par rapport au corps (<body>) de la page. Les propriétés top, right, bottom et left sont utilisées pour spécifier la position par rapport à l'ancêtre positionné.
Exemple :
/* Positionne un élément par rapport à son conteneur parent avec une marge de 10 pixels en haut et à gauche */
div {
position: absolute;
top: 10px;
left: 10px;
}
position: fixed;)Lorsque vous définissez position: fixed; sur un élément, cet élément est positionné par rapport à la fenêtre du navigateur, quel que soit le défilement de la page. Cela signifie que l'élément reste à la même position même lorsque l'utilisateur fait défiler la page. Les propriétés top, right, bottom et left sont utilisées pour spécifier la position par rapport à la fenêtre du navigateur.
Exemple :
/* Positionne un élément fixe en haut à droite de la fenêtre du navigateur */
div {
position: fixed;
top: 10px;
right: 10px;
}
position: static; - valeur par défaut)Tous les éléments HTML ont par défaut un positionnement statique, ce qui signifie qu'ils sont positionnés dans l'ordre normal du flux du document. Le positionnement statique n'est généralement pas modifié à moins que vous n'appliquiez d'autres propriétés de positionnement.
Exemple :
/* Positionnement statique par défaut */
div {
/* Aucune propriété de positionnement spécifiée */
}
Le positionnement en CSS offre une grande flexibilité pour créer des mises en page complexes et personnalisées. Il est important de comprendre comment ces différentes valeurs de positionnement fonctionnent pour les utiliser efficacement dans vos projets web.
créé le 2023-09-26 à 10:56