Quelques recherches sur Positoin, Absolute et Relative dans le positionnement CSS

Lorsque vous utilisez Div+CSS pour la mise en page d'un site Web, vous devez prendre en compte les problèmes de positionnement en CSS lorsque vous effectuez certains effets spéciaux tels que des calques flottants. Cela nécessite l'utilisation de l'attribut Positoin, etc. Les amis intéressés par le positionnement CSS devraient y jeter un œil !

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 à la suppression de l'objet de la mise en page. faites glisser le flux de documents, utilisez les propriétés gauche, droite, haut, bas et autres pour un positionnement absolu, tandis que sa cascade est définie par la propriété 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, seule 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 du bas 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 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 :
http://www.php.cn/xiazai/shouce/22

La conclusion tirée après une longue période de travail acharné, j'espère que cela sera utile à tout le monde. S'il y a des oublis, veuillez me corriger.

Recommandations associées :

Analyse du positionnement CSS et exemples de scénarios d'application

10 recommandations de cours sur le positionnement CSS

Introduction à des exemples de positionnement d'images d'arrière-plan à l'aide de 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!