Attribut de position CSS

Cet article partage principalement avec vous l'attribut position de CSS. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. Suivons l’éditeur et jetons un coup d’œil.

(1), statique
peut être considéré comme statique, les éléments par défaut sont positionnés statiquement et les objets suivent le flux régulier. Pour le moment, les quatre attributs de décalage de positionnement ne seront pas appliqués, c'est-à-dire que l'utilisation de gauche, droite, bas et haut ne prendra pas effet.

(2), relatif
Positionnement relatif, l'objet suit le flux régulier et fait référence à sa position dans le flux régulier par haut, droite, bas, gauche. La propriété de décalage de positionnement est décalée sans affecter les éléments du flux régulier.

(3), absolu
a. Positionnement absolu, l'objet se détache du flux régulier A ce moment, l'attribut offset fait référence à l'élément ancêtre du positionnement. le plus proche de lui-même. S'il n'y a pas d'élément ancêtre positionné, il reviendra toujours à l'élément body. La position décalée de la boîte n'affecte aucun élément du flux régulier et ses marges ne sont pas réduites à celles des autres marges.

b. Le positionnement de l'élément fait référence à l'élément ancêtre de positionnement le plus proche de lui-même. Il doit remplir deux conditions. La première est son propre élément ancêtre, qui peut être un élément parent ou le parent d'un élément parent. . Élément, continuez à chercher, sinon, sélectionnez le corps comme objet de comparaison. La deuxième condition est que l'élément ancêtre doit être positionné. En termes simples, peu importe si la valeur de l'attribut position est non statique.

(4), fixe
Positionnement fixe, cohérent avec l'absolu, mais le positionnement décalé est basé sur la fenêtre. Lorsque les barres de défilement apparaissent, les objets ne défilent pas.

(5), centre
sont cohérents avec l'absolu, mais le positionnement du décalage est basé sur le point central de l'élément ancêtre comme référence. La boîte est centrée verticalement et horizontalement dans son conteneur. (CSS3)

(6), page
sont cohérents avec l'absolu. Lorsqu'un élément se trouve dans un bloc de média ou de région paginé, le bloc conteneur de l'élément est toujours le bloc conteneur initial, sinon cela dépend de chaque mode absolu. (CSS3)

(7), collant
L'objet suit le flux normal lorsqu'il est normal. C'est comme une combinaison de relatif et de fixe. Lorsqu'il est à l'écran, il est saisi selon le flux normal. Lorsqu'il défile hors de l'écran, il se comporte comme un fixe. La performance de cet attribut est l’effet d’adsorption que vous voyez en réalité. (CSS3)

Recommandations associées :

en CSS attribut de position

css : attribut de position

La signification de l'attribut Position en CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!