Comment utiliser la propriété position dans CSS pour aligner des éléments

Le positionnement des éléments avec CSS dans le développement Web n'est pas aussi simple qu'il n'y paraît. Les choses peuvent devenir rapidement compliquées à mesure que votre projet s'agrandit et sans avoir une bonne compréhension de la façon dont CSS gère l'alignement des éléments HTML, vous ne pourrez pas résoudre vos problèmes d'alignement.

Il existe différentes manières / méthodes pour positionner des éléments avec du CSS pur. L'utilisation des propriétés CSS float, display et position sont les méthodes les plus courantes.

Dans cet article, j'expliquerai l'une des façons les plus déroutantes d'aligner des éléments avec du CSS pur: la propriété position. J'ai également un autre tutoriel sur la propriété d'affichage CSS ici.

Si vous préférez, vous pouvez regarder la version vidéo du tutoriel de positionnement CSS:

Commençons...

Position CSS et propriétés d'assistance

Il y a donc 5 valeurs principales de la propriété Position :

position: static | relative | absolute | fixed | sticky

et des propriétés supplémentaires pour définir les coordonnées d'un élément (je les appelle «propriétés d'assistance» ):

top | right | bottom | left Et le z-index

Remarque importante : les propriétés d'assistance ne fonctionnent pas sans position déclarée ou avec position: static.

Quel est ce z-index?

Nous avons la hauteur et la largeur (x, y) comme 2 dimensions. Z est la 3ème dimension. Un élément de la page Web vient devant d'autres éléments à mesure que sa z-indexvaleur augmente.

Z-index ne fonctionne pas avecposition: staticou sans position déclarée.

Vous pouvez regarder la vidéo sur ma chaîne pour voir comment utiliser le z-index plus en détail:

Passons maintenant aux valeurs de propriété de position ...

1. Statique

position: staticest la valeur par défaut . Que nous le déclarions ou non, les éléments sont positionnés dans un ordre normal sur la page Web. Donnons un exemple:

Tout d'abord, nous définissons notre structure HTML:

Ensuite, nous créons 2 boîtes et définissons leurs largeurs, hauteurs et positions:

.box-orange { // without any position declaration background: orange; height: 100px; width: 100px; } .box-blue { background: lightskyblue; height: 100px; width: 100px; position: static; // Declared as static }

Comme nous pouvons le voir sur l'image, définir la position: statique ou non ne fait aucune différence.Les boîtes sont positionnées selon le flux normal des documents .

2. Relatif

position: relative: Nouvelle position d'un élément par rapport à sa position normale.

En commençant par position: relativeet pour toutes les positions non statiquesvaleurs, nous pouvons changer la position par défaut d' un élément en utilisant les propriétés d'assistance que j'ai mentionnées ci-dessus.

Déplaçons la case orange à côté de la bleue.

.box-orange { position: relative; // We are now ready to move the element background: orange; width: 100px; height: 100px; top: 100px; // 100px from top relative to its old position left: 100px; // 100px from left }
REMARQUE: l'utilisation de position: relative pour un élément n'affecte pas les positions des autres éléments.

3. Absolu

Dans position: relative, l'élément est positionné par rapport à lui-même. Cependant, une ly absoluel'élément positionné est relatif à son parent .

Un élément avec position: absoluteest supprimé du flux de documents normal. Il est positionné automatiquement au point de départ ( coin supérieur gauche) de son élément parent. S'il n'a aucun élément parent, alors le document initial sera son parent.

Puisque position: absolutesupprime l'élément du flux de documents, les autres éléments sont affectés et se comportent lorsque l'élément est complètement supprimé de la page Web.

Ajoutons un conteneur comme élément parent:

.box-orange { position: absolute; background: orange; width: 100px; height: 100px; }

Maintenant, il semble que la boîte bleue a disparu, mais ce n'est pas le cas. La boîte bleue se comporte comme la boîte orange est supprimée, elle se déplace donc à la place de la boîte orange.

Déplaçons la boîte orange de 5 pixels:

.box-orange { position: absolute; background: orange; width: 100px; height: 100px; left: 5px; top: 5px; }

Les coordonnées d'un élément positionné absolu sont relatives à son parent si le parent a également une position non statique. Sinon, les propriétés d'assistance positionnent l'élément par rapport à l' initiale.

.container { position: relative; background: lightgray; } .box-orange { position: absolute; background: orange; width: 100px; height: 100px; right: 5px; // 5px relative to the most-right of parent }

4. Fixe

De même position: absolute, les éléments positionnés fixes sont également supprimés du flux de documents normal. Les différences sont:

  • Ils ne sont que relatifs au document, pas aux autres parents.
  • Ils ne sont pas affectés par le défilement .
.container { position: relative; background: lightgray; } .box-orange { position: fixed; background: orange; width: 100px; height: 100px; right: 5px; // 5px relative to the most-right of parent }

Ici, dans l'exemple, je change la position de la boîte orange en fixe , et cette fois, elle est relative 5px à droite du, pas son parent (conteneur) :

As we can see, scrolling the page doesn’t affect the fixed positioned box. It is not relative to its parent (container) anymore.

5. Sticky

position: sticky can be explained as a mix of position: relative and position: fixed.

It behaves until a declared point like position: relative, after that it changes its behavior to position: fixed . The best way to explain position: sticky is by an example:

IMPORTANT: Position Sticky is not supported in Internet Explorer and earlier versions of other browsers. You can check the browser support at caniuse.com.

The best way to understand the CSS Position Property is by practice. Keep coding until you have a better understanding. If something is not clear, I will answer your questions below in the comments section.

If you want to learn more about web development, feel free to follow me on Youtube!

Thank you for reading!