Comment le positionnement CSS peut-il obtenir un placement relatif des éléments dans un conteneur ?

Positionnement CSS pour le placement relatif des éléments

Votre quête d'une méthode multi-navigateurs, conforme aux normes et maintenable pour positionner les éléments par rapport au coin supérieur gauche de leur conteneur peut être réalisé grâce au positionnement CSS. Explorons comment procéder :

Positionnement relatif

Position CSS : relative ; définit la position d'un élément par rapport à lui-même. Il reste dans le flux normal pendant la mise en page et est ensuite compensé par les valeurs spécifiées. Notez que les autres éléments autour de lui ne se déplaceront pas avec lui.

Positionnement absolu

position : absolue ; positionne un élément par rapport à son conteneur. Par défaut, le conteneur est la fenêtre du navigateur. Cependant, si un élément parent a un ensemble position : relatif ou position : absolue, il devient le parent pour les coordonnées de positionnement de ses enfants.

Exemple

Considérez ce code :

#container {
  position: relative;
  border: 1px solid red;
  height: 100px;
}

#box {
  position: absolute;
  top: 50px;
  left: 20px;
}

<div>

Dans cet exemple, #box est positionné de manière absolue au sein du #container. Son bord supérieur est à 50 px du haut du conteneur et son bord gauche est à 20 px de la gauche du conteneur.

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!