Quelques recherches sur Positoin, Absolute et Relative dans CSS positionnementing_Experience Exchange

L'attribut Positoin a quatre valeurs : statique, fixe, absolue et relative. Ces deux dernières sont souvent utilisées dans le positionnement dans la mise en page. Comme son nom l'indique, absolu fait référence au positionnement absolu, c'est-à-dire au fait de faire glisser l'objet hors du flux de documents, en utilisant. Les attributs gauche, droite, haut, bas et autres effectuent un positionnement absolu, et leur cascade est définie via l'attribut z-index. L'objet n'a plus de marges, mais possède toujours un remplissage et des bordures. Ralatif fait référence au positionnement relatif, qui consiste à décaler la position dans le flux normal de documents en fonction des attributs gauche, droite, haut, bas et autres.
Mais quelle est la loi absolue et quelle est la loi relative ? Je ne l'ai jamais étudié attentivement auparavant, et parfois je suis un peu confus lorsqu'il s'agit d'applications spécifiques. Je pense que de nombreux amis auront également ce problème. Je l'ai testé spécifiquement aujourd'hui et suis arrivé aux conclusions suivantes :

1. Lorsque la valeur de l'attribut Positoin est relative
La position d'origine de l'objet est conservée et les objets derrière lui sont conservés. dans leur position d'origine. Le flux de documents conserve toujours la position d'origine
La valeur de Top représente la distance de décalage vers le bas de l'objet par rapport à la position d'origine
La valeur de bottom représente la distance de décalage vers le haut de l'objet par rapport à la position d'origine
Lorsque les deux existent en même temps, seul Top fonctionne.

La valeur de gauche représente la distance à laquelle l'objet est décalé vers la droite par rapport à la position d'origine.
La valeur de droite représente la distance à laquelle l'objet est décalé vers la gauche par rapport à la position d'origine. 🎜> Quand les deux existent en même temps, seul la gauche fonctionne .


2. Lorsque la valeur de l'attribut Positoin est absolue L'objet est extrait du flux de documents et la position d'origine occupée est remplacée par l'objet suivant
La valeur de Top représente l'objet La distance entre la bordure supérieure et le haut de la fenêtre du navigateur
La valeur de bottom représente la distance entre la bordure inférieure de l'objet et le bas de la fenêtre du navigateur
Lorsque les deux existent en même temps, seul Top prend effet ; si les deux ne sont pas spécifiés, la position top sera cohérente avec le flux du document d'origine, c'est-à-dire que la position verticale restera inchangée.

La valeur de left représente la distance entre la bordure gauche de l'objet et le côté gauche de la fenêtre du navigateur
La valeur de right représente la distance entre la bordure droite de l'objet et le côté droit de la fenêtre du navigateur
Lorsque les deux existent en même temps, seule la gauche fonctionne ; Si aucune des deux n'est spécifiée, son côté gauche sera cohérent avec la position originale du flux de documents, c'est-à-dire que la position horizontale restera inchangée.

Lorsque la valeur de l'attribut Positoin est absolue, s'il existe un objet parent de premier niveau (qu'il s'agisse d'un objet parent ou d'un objet grand-parent, ou de tout niveau supérieur, tous sont traités de la même manière, ^_^) le La valeur de l'attribut Positoin est relative, puis le positionnement relatif de la fenêtre du navigateur ci-dessus deviendra le positionnement relatif de l'objet parent, ce qui est très utile pour un positionnement précis.
Pour plus d'informations sur CSS, veuillez vous référer au manuel :
/shouce/css/index.html La conclusion à laquelle je suis arrivé après avoir travaillé dur pendant longtemps, j'espère que ce sera le cas utile à tout le monde. S'il y a des oublis, veuillez me corriger.