En CSS, la propriété position est utilisée pour contrôler le positionnement d'un élément dans son élément conteneur. Vous pouvez utiliser plusieurs valeurs pour la propriété position , chacune affectant le placement de l'élément de différentes manières. Voici les principales valeurs :

  1. Statique (par défaut) :

    • Les éléments sont positionnés selon le flux normal du document.
    • Il s'agit de la valeur par défaut et vous n'avez pas besoin de la spécifier explicitement.
    css
    .example { position: static; }
  2. Relatif:

    • Les éléments sont positionnés par rapport à leur position normale dans le flux de documents.
    • Si vous déplacez un élément positionné relativement, il sera décalé par rapport à sa position normale.
    css
    .example { position: relative; top: 10px; /* Moves the element 10 pixels down from its normal position */ left: 20px; /* Moves the element 20 pixels to the right from its normal position */ }
  3. Absolu:

    • Les éléments sont supprimés du flux de documents normal et positionnés par rapport à l'ancêtre positionné le plus proche.
    • S'il n'y a pas d'ancêtre positionné, il est positionné par rapport au bloc contenant initial (généralement le <html> élément).
    css
    .example { position: absolute; top: 30px; left: 40px; }
  4. Fixé:

    • Les éléments sont supprimés du flux de documents normal et positionnés par rapport à la fenêtre du navigateur.
    • L'élément reste fixe même lorsque la page défile.
    css
    .example { position: fixed; top: 50px; right: 10px; }
  5. Collant:

    • Les éléments sont positionnés en fonction de la position de défilement de l'utilisateur.
    • C'est un hybride de positionnement relatif et fixe. L'élément est traité comme positionné de manière relative jusqu'à ce qu'il croise un point spécifié, puis il est traité comme positionné de manière fixe.
    css
    .example { position: sticky; top: 0; }

Ce sont les concepts de base de la propriété position en CSS. Vous pouvez utiliser ces valeurs pour créer des mises en page et des éléments de conception complexes sur votre page Web. Gardez à l’esprit que l’efficacité de position dépend de la façon dont il interagit avec d’autres propriétés de mise en page et de la structure globale de votre HTML et CSS.