Absolute vs. Relative - Explication du positionnement CSS

Le positionnement CSS est depuis longtemps un élément important de la création de présentations de site Web. Même avec l’apparition de techniques de mise en forme CSS telles que Flexbox et CSS Grid, le positionnement occupe toujours une place importante dans les astuces de tout concepteur Web.

Lors de l'utilisation du positionnement CSS, la première chose à faire est d'établir la propriété CSS de position pour indiquer au navigateur si vous allez utiliser le positionnement absolu ou relatif pour un élément donné. Vous devez également comprendre la différence entre ces deux propriétés de positionnement.

Bien que les propriétés absolues et relatives soient les deux propriétés de position CSS les plus souvent utilisées dans la conception Web, la propriété position comporte quatre états:

• statique
• absolu
• relatif
• fixé

Positionnement statique

Statique est la position par défaut pour tout élément d'une page Web. Si vous ne définissez pas la position d'un élément, il est statique, ce qui signifie qu'il s'affiche à l'écran en fonction de son emplacement dans le document HTML et de son affichage dans le flux normal de ce document.

Si vous appliquez des règles de positionnement telles que Haut ou la gauche Pour un élément qui a une position statique, ces règles sont ignorées et l'élément reste là où il apparaît dans le flux de documents normal. Vous avez rarement, sinon jamais, besoin de définir un élément sur une position statique dans CSS, car il s'agit de la valeur par défaut.

Positionnement CSS absolu

Le positionnement absolu est probablement la position CSS la plus facile à comprendre. Vous commencez avec cette propriété de position CSS:

position: absolue;

Cette valeur indique au navigateur que tout ce qui va être positionné doit être supprimé du flux normal du document et placé à l'emplacement exact de la page. Ceci est calculé en fonction de l'ancêtre le plus proche non statiquement positionné de cet élément. Dans la mesure où un élément en position absolue est retiré du flux normal du document, il affecte le positionnement des éléments avant ou après le document HTML sur la page Web.

Par exemple, si vous avez une division positionnée à l'aide d'une valeur relative et que vous souhaitez placer un paragraphe à 50 pixels du haut de la division, vous ajoutez une valeur de position de absolu à ce paragraphe avec une valeur de décalage de 50px sur le Haut propriété, comme ceci:

position: absolue;en haut: 50 px;

Cet élément absolument positionné affiche toujours 50 pixels du haut de cette division relativement positionnée, peu importe ce qui s'affiche en flux normal. Votre élément absolument positionné utilise celui qui est relativement positionné comme contexte et la valeur de positionnement que vous utilisez est relative à celle.

Les quatre propriétés de positionnement dont vous disposez sont les suivantes:

• Haut
• droite
• bas
• la gauche

Vous pouvez utiliser soit Haut ou bas - puisqu'un élément ne peut pas être positionné selon ces deux valeurs - et soit droite ou la gauche.

Si un élément est défini sur une position absolue, mais sans ancêtres positionnés de manière non statique, il est positionné par rapport à l'élément body, qui est l'élément de niveau le plus élevé de la page.

Positionnement relatif

Le positionnement relatif utilise les mêmes quatre propriétés de positionnement que le positionnement absolu, mais au lieu de baser la position de l'élément sur son ancêtre le plus proche, placé non statiquement, il commence à l'endroit où l'élément se trouverait s'il se trouvait toujours dans le flux normal.

Par exemple, si vous avez trois paragraphes sur votre page Web et que le troisième a un position: relative style placé dessus, sa position est décalée en fonction de son emplacement actuel.

Paragraphe 1.

Paragraphe 2

Paragraphe 3

Dans l'exemple ci-dessus, le troisième paragraphe est placé 2em à partir du côté gauche de l'élément conteneur mais toujours en dessous des deux premiers paragraphes. Il reste dans le flux normal du document et est légèrement décalé. Si vous le changez en position: absolue, tout ce qui suit apparaît au-dessus car il ne fait plus partie du flux normal du document.

Les éléments d’une page Web sont souvent utilisés pour définir une valeur de position: relative sans valeur de décalage établie, ce qui signifie que cet élément reste exactement là où il apparaîtrait dans un flux normal. Ceci est fait uniquement pour établir cet élément comme un contexte contre lequel d'autres éléments peuvent être positionnés de manière absolue. Par exemple, si vous avez une division entourant l’ensemble de votre site Web avec une valeur de classe de récipient, qui est un scénario courant dans la conception Web, cette division peut être définie sur une position de relatif de sorte que tout ce qui s'y trouve puisse l'utiliser comme contexte de positionnement.

Qu'en est-il du positionnement fixe?

Le positionnement fixe ressemble beaucoup au positionnement absolu. La position de l'élément est calculée de la même manière que le modèle absolu, mais les éléments fixes sont ensuite fixés à cet emplacement, presque comme un filigrane. Tout le reste de la page passe ensuite devant cet élément.

Pour utiliser cette valeur de propriété, vous définissez:

position: fixe;

N'oubliez pas que lorsque vous fixez un élément sur votre site, celui-ci s'imprime à cet emplacement lors de l'impression de votre page Web. Par exemple, si votre élément est fixé en haut de votre page, il apparaîtra en haut de chaque page imprimée car il est fixé en haut de la page. Vous pouvez utiliser des types de support pour modifier l'affichage des éléments fixes dans les pages imprimées:

@media screen { h1 # first {position: fixed; } } @media print { h1 # premier {position: statique; } }