Positionnement Absolu en CSS
L'utilisation du positionnement absolu retire l'élément du flux de document par défaut, permettant ainsi aux autres éléments voisins de combler l'espace laissé. Les valeurs de positionnement top, left, bottom et right de l'élément sont calculées par rapport à son ancêtre le plus proche ayant un positionnement non statique. S'il n'existe aucun tel ancêtre, les valeurs sont déterminées en fonction des bordures de l'élément <body>.
position: absolute;
En général, le positionnement absolu est utilisé en combinaison avec le positionnement relatif, car il est nécessaire de positionner un élément par rapport à un autre élément dans le flux du document.
Considérez l'exemple suivant. L'objectif est de placer le nom de la ville (un élément <span> avec la classe description) dans le coin supérieur droit de la carte de la ville (un élément <div> avec la classe card). Portez une attention particulière à la propriété position pour les différents éléments.
index.html
index.css
Dans cet exemple, les éléments .description sont positionnés de manière absolue à l'intérieur des éléments .card, grâce à l'application de position: relative; sur .card. Ce positionnement place les noms des villes dans le coin supérieur droit de chaque carte.
Il est possible de déplacer l’élément par rapport à un autre élément. Comment cela fonctionne-t-il ? Il est nécessaire d’appliquer position: relative; à l’élément ancêtre de celui que l’on souhaite positionner en absolu. Sinon, l’élément sera positionné par rapport à l’élément <body>.
Remarque
Lors de la spécification des propriétés
top,left,rightetbottompour un élément positionné en absolu, le navigateur les calcule à partir des bordures de l'élément positionné relativement. Cela peut être considéré comme l'application d'une marge à l'élément enfant à l'intérieur de l'élément parent.
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Awesome!
Completion rate improved to 2.04Positionnement Absolu en CSS
Glissez pour afficher le menu
L'utilisation du positionnement absolu retire l'élément du flux de document par défaut, permettant ainsi aux autres éléments voisins de combler l'espace laissé. Les valeurs de positionnement top, left, bottom et right de l'élément sont calculées par rapport à son ancêtre le plus proche ayant un positionnement non statique. S'il n'existe aucun tel ancêtre, les valeurs sont déterminées en fonction des bordures de l'élément <body>.
position: absolute;
En général, le positionnement absolu est utilisé en combinaison avec le positionnement relatif, car il est nécessaire de positionner un élément par rapport à un autre élément dans le flux du document.
Considérez l'exemple suivant. L'objectif est de placer le nom de la ville (un élément <span> avec la classe description) dans le coin supérieur droit de la carte de la ville (un élément <div> avec la classe card). Portez une attention particulière à la propriété position pour les différents éléments.
index.html
index.css
Dans cet exemple, les éléments .description sont positionnés de manière absolue à l'intérieur des éléments .card, grâce à l'application de position: relative; sur .card. Ce positionnement place les noms des villes dans le coin supérieur droit de chaque carte.
Il est possible de déplacer l’élément par rapport à un autre élément. Comment cela fonctionne-t-il ? Il est nécessaire d’appliquer position: relative; à l’élément ancêtre de celui que l’on souhaite positionner en absolu. Sinon, l’élément sera positionné par rapport à l’élément <body>.
Remarque
Lors de la spécification des propriétés
top,left,rightetbottompour un élément positionné en absolu, le navigateur les calcule à partir des bordures de l'élément positionné relativement. Cela peut être considéré comme l'application d'une marge à l'élément enfant à l'intérieur de l'élément parent.
Merci pour vos commentaires !
