Positionnement relatif CSS
- Page précédente Vue d'ensemble de la positionnement CSS
- Page suivante Positionnement absolu CSS
La boîte d'un élément positionné relativement se déplace d'une certaine distance. L'élément conserve toujours sa forme avant la position, et l'espace qu'il occupait reste inchangé.
Positionnement relatif CSS
Le positionnement relatif est un concept très facile à comprendre. Si vous effectuez un positionnement relatif sur un élément, il apparaîtra à sa position actuelle. Ensuite, vous pouvez définir une position verticale ou horizontale pour que cet élément 'par rapport' à son point de départ se déplace.
Si vous définissez top à 20px, la boîte sera située 20 pixels en dessous du sommet de la position d'origine. Si left est défini à 30 pixels, cela créera un espace de 30 pixels à gauche de l'élément, ce qui déplace l'élément vers la droite.
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
Comme illustré dans l'image suivante :
Notez que lors de l'utilisation du positionnement relatif, 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 peut le faire recouvrir d'autres boîtes.
Exemple de positionnement relatif CSS
- Positionnement : positionnement relatif
- L'exemple montre comment positionner un élément par rapport à sa position normale.
- Page précédente Vue d'ensemble de la positionnement CSS
- Page suivante Positionnement absolu CSS
