Position CSS (Position)

La propriété position de CSS est utilisée pour spécifier comment un élément est positionné sur la page, et les méthodes de positionnement CSS (position) sont les suivantes : position statique (static), position absolu (absolute), position relative (relative), position fixe (fixed).

Méthodes de positionnement CSS

La position des éléments sur une page web est nécessaire pour une conception de mise en page de qualité. CSS propose plusieurs méthodes de positionnement des éléments. La section suivante présentera l'une après l'autre ces méthodes de positionnement.

Position statique (static)

Les éléments de positionnement statique sont toujours positionnés en fonction du flux normal de la page. Par défaut, les éléments HTML sont en position statique. Les éléments de positionnement statique n'affectent pashaut,bas,gauche,droite, etz-indexCaractéristiques.

Si la valeur de la propriété position de l'élément n'est pas spécifiée, c'est-à-dire dans le cas par défaut, l'élément est en position statique. Tous les objets HTML qui supportent la propriété position sont par défaut en position statique. Static est la valeur par défaut de la propriété position, ce qui signifie que le bloc reste à sa position d'origine et ne se redéfinit pas.
En réalité, nous n'utilisons jamais vraiment "position:static", mais parfois, lorsque nous utilisons JavaScript pour contrôler la position des éléments, si nous voulons que d'autres éléments de positionnement deviennent statiques, nous devons utiliser "position:static;" pour y parvenir.

.box {
　　　　padding:　20px;
　　　　background: #7dc765;
}

Position relative (relative)

Les éléments positionnés en relative sont positionnés par rapport à leur position normale.

Dans le schéma de position relative, la position de la boîte de l'élément est calculée en fonction du flux normal. Ensuite, selon les attributs- top ou bottom et/ou left pour déplacer le cadre de cette position normale à droite.

.box {
　　　　position: relative;
　　　　left:　100px;
}

Position absolute (absolute)

Les éléments positionnés en absolute sont positionnés par rapport au premier parent ayant une position non statique. Si aucun tel élément n'est trouvé, il est placé à l'extrême gauche et en haut de la page par rapport à la fenêtre du navigateur. Des attributs supplémentaires comme top, right, bottom et left peuvent être utilisés pour la décalage de la boîte.

Les éléments positionnés en absolute sont complètement retirés du flux normal, donc ils ne prennent pas de place lors de l'alignement des éléments de même niveau. Cependant, en fonction dez-indexLa valeur de l'attribut, qui peut se chevaucher avec d'autres éléments. De plus, les éléments positionnés en absolute peuvent avoirmargeEt elles ne se collent pas avec d'autres marges.

.box {
　　　　position: fixed;
　　　　top:　200px;
　　　　left:　100px;
}

Position fixed (fixed)

La position fixed est une sous-catégorie de la position absolute.

La seule différence est que les éléments positionnés en fixed sont fixes par rapport à la fenêtre du navigateur et ne bougent pas lors du défilement.

.box {
　　　　position: fixed;
　　　　top:　200px;
　　　　left:　100px;
}