Positionnement Absolu

L'utilisation du positionnement absolu retire l'élément du flux de document par défaut, permettant aux autres éléments voisins de combler l'espace. Les valeurs de positionnement top, left, bottom et right de l'élément sont calculées par rapport à son ancêtre le plus proche avec un positionnement non statique. S'il n'y a pas un tel ancêtre, les valeurs sont déterminées en fonction des bordures de l'élément <body>.


css
position: absolute;

Généralement, nous sommes intéressés par l'utilisation du positionnement absolu en combinaison avec le positionnement relatif car nous avons besoin de positionner un élément par rapport à un autre élément dans le flux du document.

Considérez l'exemple suivant. La tâche consiste à 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). Faites attention à la propriété position pour les différents éléments.

index.html

index.css

<!DOCTYPE html>

<head>

</head>

<body>

<img

src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/advanced+css+techniques/positioning+section/amalfi.jpg"

alt="Amalfi"

width="160px"

height="100px"

class="image"

<span class="description">Amalfi</span>

</div>

<img

src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/advanced+css+techniques/positioning+section/dubai.jpg"

alt="Dubai"

width="160px"

height="100px"

class="image"

<span class="description">Dubai</span>

</div>

<img

src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/advanced+css+techniques/positioning+section/new+york.jpg"

alt="New York"

width="160px"

height="100px"

class="image"

</div>

</body>

</html>

Dans cet exemple, les éléments .description sont positionnés de manière absolue à l'intérieur des éléments .card, grâce au position: relative; appliqué aux .card. Ce positionnement place les noms des villes dans le coin supérieur droit de chaque carte.

Nous pouvons déplacer l'élément par rapport à un autre élément. Comment cela fonctionne-t-il ? Nous devons appliquer position: relative; à l'élément qui est l'ancêtre de l'élément que nous souhaitons positionner absolument. Dans un autre cas, l'élément sera positionné par rapport à l'élément <body>.

Remarque

Lors de la spécification des propriétés top, left, right et bottom pour l'élément positionné absolument, le navigateur les calcule en commençant par les 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.

Tout était clair ?

Merci pour vos commentaires !

Section 2. Chapitre 4

Demandez à l'IA

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion