En HTML / CSS, quelle est la différence entre positionnement absolu et positionnement relatif?


Réponse 1:

Relatif:

Un élément avec position: relative; est positionné par rapport à sa position normale.

La définition des propriétés supérieure, droite, inférieure et gauche d'un élément relativement positionné entraînera son ajustement par rapport à sa position normale. Les autres contenus ne seront pas ajustés pour s'adapter à tout espace laissé par l'élément.

en savoir plus sur CSS Layout - La propriété position

Absolu:

Un élément avec position: absolu; est positionné par rapport à l'ancêtre le plus proche (au lieu d'être positionné par rapport à la fenêtre, comme fixe).

Pourtant; si un élément positionné absolu n'a pas d'ancêtres positionnés, il utilise le corps du document et se déplace avec le défilement de la page.

Remarque: Un élément "positionné" est un élément dont la position est tout sauf statique.

en savoir plus sur CSS Layout - La propriété position

Source: w3schools


Réponse 2:

Il se décompose selon qu'il utilise ou non l'endroit où il a été fourni. Lorsque HTML est disposé, il forme une sorte de pile, donc une chose après l'autre descend la page. Si une chose est supprimée, tout monte pour remplir son espace.

Avec un positionnement relatif, cet espace lui est réservé. Donc, même si vous déplacez l'élément avec CSS haut / gauche, l'espace dans lequel il était censé rester est intact.

Cependant, lorsque vous attribuez un positionnement absolu, il est retiré de cette pile et tout ce qui se trouve en dessous se déplace pour prendre sa place. Il se trouve sur sa propre couche séparée et n'affecte plus la page. Il est positionné en fonction du parent le plus proche qui a un positionnement relatif.

Il existe un autre type, et c'est fixe. C'est comme un positionnement absolu, sauf qu'il utilise la fenêtre du navigateur comme référence et n'est donc même pas connecté au défilement et restera en place même si la page est défilée.


Réponse 3:

Il se décompose selon qu'il utilise ou non l'endroit où il a été fourni. Lorsque HTML est disposé, il forme une sorte de pile, donc une chose après l'autre descend la page. Si une chose est supprimée, tout monte pour remplir son espace.

Avec un positionnement relatif, cet espace lui est réservé. Donc, même si vous déplacez l'élément avec CSS haut / gauche, l'espace dans lequel il était censé rester est intact.

Cependant, lorsque vous attribuez un positionnement absolu, il est retiré de cette pile et tout ce qui se trouve en dessous se déplace pour prendre sa place. Il se trouve sur sa propre couche séparée et n'affecte plus la page. Il est positionné en fonction du parent le plus proche qui a un positionnement relatif.

Il existe un autre type, et c'est fixe. C'est comme un positionnement absolu, sauf qu'il utilise la fenêtre du navigateur comme référence et n'est donc même pas connecté au défilement et restera en place même si la page est défilée.