Dans l'attribut de position CSS : la différence entre absolu et relatif

Si vous utilisez position pour mettre en page la page, l'attribut position de l'élément parent doit être relatif, et pour les éléments positionnés à une certaine position à l'intérieur de l'élément parent , il est préférable d'utiliser Absolute, car il n'est pas affecté par l'attribut padding de l'élément parent. Bien sûr, vous pouvez également utiliser position, mais n'oubliez pas la valeur. de remplissage lors du calcul. »

La valeur de l'attribut de position par défaut de tout élément est statique, statique Aujourd'hui, le groupe 51RGB Q 186242343 parle principalement de relatif (relatif) et d'absolu (absolu).

[position:absolute]
signifie : Il signifie positionnement absolu, qui est par défaut dans le coin supérieur gauche du navigateur, combiné avec TOP, RIGHT, BOTTOM, LEFT (ci-après dénommé TRBL) pour le positionnement, a les attributs suivants :
1) S'il n'y a pas de TRBL, utilisez le haut coin gauche du parent, dans Lorsqu'il n'y a pas de parent, il fait référence au coin supérieur gauche du navigateur. S'il y a du texte sans élément parent, il sera positionné avec le coin supérieur droit du dernier texte devant lui. comme origine mais sans casser le texte et le couvrir ci-dessus.
2) Si TRBL est défini et que le parent ne définit pas l'attribut de position, alors l'absolu actuel sera positionné avec le coin supérieur gauche du navigateur comme point d'origine, et la position sera déterminé par TRBL.
3) Si TRBL est défini et que le parent définit l'attribut de position (qu'il soit absolu ou relatif), le coin supérieur gauche du parent est utilisé comme origine pour le positionnement, et la position est déterminé par TRBL. Même si le parent a un attribut Padding, cela n'a aucun effet sur lui : il n'insiste que sur un point et utilise le coin supérieur gauche du parent comme origine pour le positionnement. du tout.

Les trois points ci-dessus peuvent être résumés. Si vous souhaitez positionner un élément avec un attribut de positionnement absolu au sein de son élément parent, seules deux conditions doivent être remplies,
Premier : définissez TRBL
Deuxièmement : définissez l'attribut Position du parent
Le résumé ci-dessus est très important pour vous assurer que vous utilisez absolue pour mettre en page la page ne sera pas mal aligné et ne changera pas avec la taille du navigateur ou la taille de la résolution d'affichage.
Tant qu'il y a une insatisfaction, l'élément prendra le coin supérieur gauche du navigateur comme origine. C'est là que les débutants ont tendance à faire des erreurs lorsque la taille de la section positionnée change, l'élément parent changera en conséquence, mais la position de la section et de l'élément parent dont l'attribut Position est défini sur

absolu a changé et est mal aligné. C'est parce que l'élément est positionné dans. le coin supérieur droit du navigateur. La raison pour laquelle l'angle est l'origine.
Une erreur facile pour les débutants est de ne pas connaître la section dont l'attribut Position est absolu si vous souhaitez la positionner dans la section parent, et lorsque la taille du navigateur change ou la résolution du. surveiller les changements, la mise en page changera. S'il n'y a pas de changement, deux conditions doivent être remplies. Tant que l'une d'elles n'est pas remplie, l'élément prendra le coin supérieur gauche du navigateur comme origine, provoquant le mise en page à mal aligner.

[position:relative]
signifie positionnement relatif Il fait référence au point d'origine du parent comme point d'origine par. par défaut. S'il n'y a pas de parent, le bas de l'élément précédent dans l'ordre du flux de texte sera utilisé comme point d'origine, et TRBL est utilisé pour le positionnement. Lorsqu'il y a des attributs CSS tels que le remplissage dans le parent, le point d'origine. du niveau actuel sera basé sur le point d'origine de la zone de contenu parent. Le positionnement a les attributs suivants :
1) S'il n'y a pas de TRBL, le coin supérieur gauche du parent est utilisé. Lorsqu'il n'y a pas de parent, il fait référence au coin supérieur gauche du navigateur (allez ici et absolu en premier) Idem), s'il y a du texte sans élément parent, le bas du texte est utilisé comme point d'origine pour le positionnement et le le texte est déconnecté (différent de l'absolu).
2) Si TRBL est défini et que le parent ne définit pas l'attribut de position, le coin supérieur gauche du parent sera toujours utilisé comme origine pour le positionnement (différent de l'absolut)
3) Si TRBL est défini et que le parent définit l'attribut de position (qu'il soit absolu ou relatif), le coin supérieur gauche du parent est utilisé comme origine pour le positionnement, et la position est déterminée par TRBL (le premier la moitié est la même que l'absolu). Si le parent a un attribut Padding, alors le coin supérieur gauche de la zone de contenu est utilisé comme origine pour le positionnement (la seconde moitié est différente de l'absolu).

On peut conclure des trois points ci-dessus que peu importe si le parent existe ou non, qu'il y ait TRBL ou non, le coin supérieur gauche du parent sera positionné, mais l'attribut Padding du parent aura son impact. Sur la base de la description ci-dessus du relatif, nous pouvons considérer le p dont l'attribut de position est relatif comme un p ordinaire qui peut être positionné à l'aide de TRBL, ou nous devons simplement ajouter la position à l'attribut CSS de p dans notre page de mise en page habituelle. . Après :relative, vous pouvez non seulement utiliser float pour mettre en page la page, mais également utiliser TRBL pour mettre en page la page. En d'autres termes, p avec position:relative peut également mettre en page la page comme un p normal, mais vous pouvez également utiliser TRBL. pour mettre en page la page. Mais l'attribut position est absolu Il ne peut pas être utilisé pour mettre en page la page, car s'il est utilisé pour la mise en page, tous les p seront positionnés par rapport au coin supérieur gauche du navigateur, il ne peut donc être utilisé que pour positionner un élément quelque part à l'intérieur d'un élément avec l'attribut absolu In. de cette façon, nous pouvons résumer les conclusions les plus importantes. Puisque l'élément avec l'attribut absolu est utilisé pour localiser la position d'un élément dans le parent, TRBL est indispensable à ce stade, selon le troisième article d'absolu mentionné au début. , si l'élément parent n'a pas d'attribut
position, alors l'élément absolu sera séparé de l'élément parent, mais s'il s'agit d'une page de mise en page, l'attribut position de l'élément parent ne peut pas être absolu , sinon le coin supérieur gauche du navigateur sera l'origine, donc le parent L'attribut position des éléments de niveau ne peut être que relatif !

Les éléments avec l'attribut relatif peuvent être utilisés pour mettre en page la page, et les éléments avec l'attribut absolu peuvent être utilisés pour positionner un élément dans le parent

Résumé : Si la position est utilisée pour mettre en page la page, l'attribut position de l'élément parent doit être relatif. Pour les éléments positionnés à une certaine position à l'intérieur du parent, il est préférable d'utiliser absolu, car il n'est pas affecté par. l'attribut padding de l'élément parent Bien sûr, vous pouvez également utiliser position, mais n'oubliez pas la valeur de padding lors du calcul.
Cependant, le positionnement présente un inconvénient, il ne s'adapte pas à la hauteur des éléments internes, donc lorsque nous disposons habituellement la page, si la hauteur d'un ou de plusieurs modules ne change jamais, il peut utiliser positionnement, mais Fan recommande que lors de la mise en page de la page, vous utilisiez toujours Float comme méthode principale et Position en complément ! Ce n'est qu'ainsi que vous pourrez créer des pages de haute qualité.

Enfin, n'oubliez pas mes mots : "Lors de la mise en page d'une page, Float est le principal et Position est le deuxième !"

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!