La propriété de position CSS expliquée avec des exemples

Avant de pouvoir être vraiment bon en CSS, vous devez comprendre les bases. Vous devez comprendre les propriétés CSS et leurs valeurs.

Dans cet article, nous allons nous concentrer sur la propriété de position CSS. Nous allons apprendre les différentes valeurs de la propriété CSS position et leur fonctionnement. Faisons cela!

Quelle est la propriété de position CSS?

La propriété CSS position définit la position d'un élément dans un document. Cette propriété fonctionne avec les propriétés left, right, top, bottom et z-index pour déterminer la position finale d'un élément sur une page.

La propriété position peut prendre cinq valeurs. Elles sont:

  1. statique
  2. relatif
  3. absolu
  4. fixé
  5. gluant

Discutons de chacun d'eux.

Statique

Il s'agit de la valeur par défaut des éléments. L'élément est positionné selon le flux normal du document. Les propriétés left, right, top, bottom et z-index n'affectent pas un élément avec position: static.

Prenons un exemple pour montrer que cela position: staticn'a aucun effet sur la position d'un élément. Nous avons trois div placés dans un conteneur parent. Nous utiliserons cet exemple tout au long de cet article.

 I'm the other sibling element. All eyes on me. I am the main element. I'm the other sibling element. 

Ajoutons position: staticau div avec la classe main-elementet à gauche, les valeurs supérieures. Nous ajoutons également des styles aux autres divs pour les différencier de l'élément en focus.

.main-element { position: static; left: 10px; bottom: 10px; background-color: yellow; padding: 10px; } .sibling-element { padding: 10px; background-color: #f2f2f2; }

Voilà le résultat.

Avez-vous remarqué qu'il n'y a pas de changement? Cela confirme le fait que les propriétés left et bottom n'affectent pas un élément avec position: static.

Passons à la valeur suivante.

Relatif

Les éléments avec position: relativerestent dans le flux normal du document. Mais, contrairement aux éléments statiques, les propriétés left, right, top, bottom et z-index affectent la position de l'élément. Un décalage, basé sur les valeurs des propriétés left, right, top et bottom, est appliqué à l'élément par rapport à lui-même.

Remplaçons position: staticpar position: relativedans notre exemple.

.main-element { position: relative; left: 10px; bottom: 10px; background-color: yellow; padding: 10px; }

Notez que les propriétés gauche et inférieure affectent désormais la position de l'élément. Notez également que l'élément reste dans le flux normal du document et que le décalage est appliqué par rapport à lui-même. Prenez-en note lorsque nous passons à d'autres valeurs.

Absolu

Les éléments avec position: absolutesont positionnés par rapport à leurs éléments parents. Dans ce cas, l'élément est supprimé du flux de documents normal. Les autres éléments se comporteront comme si cet élément ne figurait pas dans le document. Aucun espace n'est créé pour l'élément dans la mise en page. Les valeurs de gauche, haut, bas et droite déterminent la position finale de l'élément.

Une chose à noter est qu'un élément avec position: absoluteest positionné par rapport à son ancêtre positionné le plus proche. Cela signifie que l'élément parent doit avoir une valeur de position différente de position: static.

Si l'élément parent le plus proche n'est pas positionné, il est positionné par rapport à l'élément parent suivant qui est positionné. S'il n'y a pas d'élément ancêtre positionné, il est positionné par rapport à l' élément.

Revenons à notre exemple. Dans ce cas, nous changeons la position de l'élément principal en position: absolute. Nous allons également donner à son élément parent une position relative afin qu'il ne soit pas positionné par rapport à l' élément.

.main-element { position: absolute; left: 10px; bottom: 10px; background-color: yellow; padding: 10px; } .parent-element { position: relative; height: 100px; padding: 10px; background-color: #81adc8; } .sibling-element { background: #f2f2f2; padding: 10px; border: 1px solid #81adc8; } 

Voici le résultat.

Notez qu'aucun espace n'a été créé dans le document pour l'élément. L'élément est maintenant positionné par rapport à l'élément parent. Prenez-en note lorsque nous passons à la valeur suivante.

Fixé

Les éléments à position fixe sont similaires aux éléments positionnés de manière absolue. Ils sont également supprimés du flux normal du document. Mais contrairement à l'élément positionné de manière absolue, ils sont toujours positionnés par rapport à l' élément.

Une chose à noter est que les éléments fixes ne sont pas affectés par le défilement. Ils restent toujours dans la même position sur l'écran.

.main-element { position: fixed; bottom: 10px; left: 10px; background-color: yellow; padding: 10px; } html { height: 800px; }

Dans ce cas, l'élément est positionné par rapport à l' élément. Essayez de faire défiler pour voir que l'élément se fixe sur l'écran.

Passons à la valeur finale.

Gluant

position: stickyest un mélange de position: relativeet position: fixed. Il agit comme un élément relativement positionné jusqu'à un certain point de défilement, puis il agit comme un élément fixe. N'ayez pas peur si vous ne comprenez pas ce que cela signifie, l'exemple vous aidera à mieux le comprendre.

.main-element { position: sticky; top: 10px; background-color: yellow; padding: 10px; } .parent-element { position: relative; height: 800px; padding: 50px 10px; background-color: #81adc8; }

Faites défiler l'onglet des résultats pour voir le résultat. Vous voyez qu'il agit comme un élément relatif jusqu'à ce qu'il atteigne un certain point sur l'écran, top: 10pxpuis il y arrive comme un élément fixe.

Sommaire

Oups! Cela a été tout un tour. Mais j'espère vraiment que cet article vous a aidé à comprendre la propriété de position CSS et son fonctionnement.

Feel free to play around with the fiddles if you don't fully understand any of them. You can change the values and notice the difference or better still, try to use the position property to work on a personal project.

Remember that getting better at CSS takes constant practice. So keep practicing and you'll get better.

Want to get notified when I publish a new article? Click here.