Position absolu CSS

Le cadre de l'élément positionné en absolu est complètement supprimé du flux de document et positionné par rapport à son bloc englobant, qui peut être un autre élément dans le document ou le bloc englobant initial. L'espace occupé par l'élément dans le flux normal est fermé, comme s'il n'avait jamais existé. La position de l'élément génère un cadre en bloc, indépendamment du type de cadre qu'il aurait généré dans le flux normal.

Position absolu CSS

La position absolute rend la position de l'élément indépendante du flux de document, donc elle ne prend pas de place. Cela diffère de la position relative, qui est en fait considérée comme une partie du modèle de positionnement du flux normal, car la position de l'élément est par rapport à sa position dans le flux normal.

Les autres éléments dans le flux normal sont disposés comme s'ils n'existaient pas pour l'élément positionné en absolu :

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

Comme illustré dans l'image suivante :

Exemple de positionnement absolu CSS

La position des éléments de positionnement absolu est par rapport àLe parent le plus proche déjà positionnéSi l'élément n'a pas de parent positionné, sa position est par rapport àLe bloc englobant initial.

Pour les problèmes principaux de positionnement, il est important de se souvenir du sens de chaque type de positionnement. Alors, révisons maintenant ce que nous avons appris : la position relative est "par rapport à" la position initiale de l'élément dans le document, tandis que la position absolu est "par rapport à" le parent le plus proche déjà positionné, si il n'y a pas de parent positionné, alors "par rapport à" le bloc englobant initial.

Remarque :Selon le navigateur utilisateur, le bloc englobant initial peut être le canvas ou l'élément HTML.

Astuce :Les boîtes de positionnement absolu sont indépendantes du flux de document, donc elles peuvent couvrir d'autres éléments sur la page. Vous pouvez définir Attribut z-indexPour contrôler l'ordre d'empilement de ces boîtes.

Exemple de positionnement absolu CSS

Position : positionnement absolu
Cette exemple montre comment utiliser des valeurs absolues pour positionner des éléments.