Introduction et utilisation du positionnement relatif et du positionnement absolu en CSS

1. Quatre valeurs de position : statique, relative, absolue, fixe.

Positionnement absolu : absolu et fixe sont collectivement appelés positionnement absolu

Positionnement relatif : relatif

Valeur par défaut : statique

2 . La différence entre le positionnement relatif et le positionnement absolu

Exemple :

Code HTML :

code css :

1.position : relatif ; si un élément est positionné de manière relative, il apparaîtra d'abord à son emplacement. Déplacez ensuite l'élément "par rapport" à son point de départ d'origine en définissant une position verticale ou horizontale. (Encore un point, lorsqu'il est positionné de manière relative, l'élément occupe toujours l'espace d'origine, qu'il soit déplacé ou non. Par conséquent, le déplacement de l'élément le fera recouvrir d'autres cases) Par exemple, #mybox{position: relativ left: 20px; top: 20px;} L'effet est de créer ce calque en campagne et de le déplacer de 20px vers la gauche.

2.position : absolue ; indique un positionnement absolu. La position sera calculée en fonction du point 0 dans le coin supérieur gauche du navigateur. Le positionnement absolu rend l'élément indépendant du flux du document. occuper de l'espace. Les éléments du flux de documents normal sont disposés comme si les éléments positionnés de manière absolue n'étaient pas présents. Il est positionné par rapport à l'ancêtre positionné le plus proche ou, si l'élément n'a pas d'ancêtre positionné, sa position est relative au bloc conteneur le plus ancien. (Étant donné que les cases positionnées de manière absolue sont indépendantes du flux de documents, elles peuvent couvrir d'autres éléments sur la page et l'ordre d'empilement de ces cases peut être contrôlé par l'index z. Plus la valeur de l'index z est élevée, plus la case est positionnée loin dans le tas. High. )

Alors maintenant, la plupart des pages Web que nous créons sont centrées, j'ai donc besoin de cet élément pour suivre la position d'un certain élément dans la page Web, quelle que soit la résolution, sa position est toujours dans la page. Un certain élément, alors simplement absolu, ne fonctionnera pas. La solution correcte consiste à définir l'élément parent de l'élément comme position: relative; (cela peut être un grand-parent ou une position: absolue;) et l'élément qui nécessite un positionnement absolu est défini sur position: absolue puis défini en haut, à droite; Les valeurs , bottom et left sont suffisantes, de sorte que la norme de référence pour le positionnement soit le côté supérieur gauche du rembourrage du coin supérieur gauche du parent.

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!