Fondamentaux CSS: Positionnement – ITNEXT

Écrit par

Carole B.

dans

Table des matières

Fondamentaux CSS: Positionnement – ITNEXT

Timothy Robards

En CSS, nous définissons l’emplacement d’un élément en utilisant le position propriété.

Par exemple:

.element {
position: relative;
top: 10px;
}

La position de nos éléments sera déplacée de 10 pixels vers le haut par rapport à sa position d’origine dans le document.

le position La propriété peut avoir l’une des 5 valeurs suivantes:

  • static
  • relative
  • absolute
  • fixed
  • sticky

Jetons un œil à chacun!

Êtes-vous prêt à faire passer vos compétences CSS au niveau supérieur? Commencez dès maintenant avec mon nouveau cours à Educative.io SASS for CSS: Développement frontal avancé. Restez à jour sur toutes les fonctionnalités dont vous avez besoin pour faire progresser vos compétences en développement frontal!

Chaque élément a un static position par défaut. Les éléments positionnés statiques sont affichés dans le flux de page normal.

Prenons l’exemple HTML suivant:


parent








child


element



Et quelques CSS de base:

* {
font-family: monospace;
text-align: center;
font-size: 24px;
}
.parent {
background-color: pink;
padding: 40px;
width: 500px;
border: 2px solid #000;
}
.child {
background-color: green;
padding: 30px;  
border: 2px solid #000;
}
.element {
background-color: yellow;
padding: 30px;
border: 2px solid #000;
}

Cela nous donne les éléments suivants:

Nous avons notre défaut static disposition. le static il n’est pas nécessaire de définir la position comme prévu.

Si nous tentions d’appliquer des propriétés telles que top, bottom, leftou right à un élément statique, il n’y aurait aucun effet.

Un élément avec un relative position restera également dans le flux de documents, seulement maintenant top, bottom, left& right marchera!

Ces propriétés (appelées propriétés «offset») déplacent l’élément de la position d’origine dans la direction spécifiée.

Ils acceptent n’importe quelle valeur de longueur ou un pourcentage.

Ajoutons position: relative & left avec une valeur de décalage de 100px à notre élément:

.element {
/* other styles ... */
position: relative;
left: 100px;
}

Notre élément se déplacera de 100px à partir de la gauche, par rapport à son conteneur.

Nous pourrions également définir plusieurs valeurs:

.element {
/* other styles ... */
position: relative;
top: -200px;
left: 100px;
}

La valeur négative pour top déplace la boîte vers le haut par rapport à son conteneur.

Vous remarquerez également l’espace précédemment occupé par le element boîte reste. Comme sa position est décalée par rapport à sa position d’origine.

Nous pouvons également postuler z-index aux éléments relativement positionnés!

Quand le absolute la position est définie sur un élément, il est complètement supprimé du flux de documents. Cela signifie que tous les autres éléments de la page se comporteront comme s’ils n’existaient plus.

Donnons à notre élément un position: absolute, nous pouvons voir que son espace d’origine s’est maintenant effondré, car l’élément existe en dehors du flux de documents.

.element {
/* other styles ... */
position: absolute;
}

Nous pouvons utiliser des propriétés positionnelles avec un absolute élément. Nous pouvons donc le déplacer en utilisant top, right, bottom, ou left:

.element {
/* other styles ... */
position: absolute;
top: 0px;
left: 0px;
}

Il se positionnera aux coordonnées 0,0 de la fenêtre du navigateur (le coin supérieur gauche).

Ou:

.element {
/* other styles ... */
position: absolute;
top: 250px;
left: 100px;
}

Nos propriétés de décalage définissent toujours la position par rapport au conteneur le plus proche qui est ne pas static.

Si tous les conteneurs parents sont statiques, ils seront placés par rapport à la fenêtre.

Mais si on ajoute position: relative à la .child et définissez l’élément top et left à 0, l’élément sera positionné aux coordonnées 0, 0 de .child :

.child {
/* other styles ... */
position: relative;
}.element {
/* other styles ... */
position: absolute;
top: 0px;
left: 0px;
}

C’est une excellente astuce à retenir lors du positionnement d’éléments sur une page!

Vous pouvez aussi utiliser z-index placement avec positionnement absolu.

Un élément avec un fixed La valeur est similaire à absolue dans la mesure où elle est également supprimée du flux du document.

Un élément positionné fixe est toujours par rapport au fenêtre elle-même, ne pas tout conteneur parent particulier:

.element {
/* other styles ... */
position: fixed;
top: 0;
left: 0;
}

Aussi, fixed les éléments ne sont pas affectés par le défilement. Cela signifie que sa position restera la même même lorsque la page défile.

Par exemple, vous pouvez utiliser le fixed élément pour placer une icône de « défilement vers le haut » en bas à droite de la page!

le sticky la valeur est un hybride de la relative et fixed valeurs. Il est traité comme un relative jusqu’à ce que l’emplacement de défilement (de la fenêtre) atteigne un seuil spécifié. À ce stade, il «colle» en place, agissant comme un fixed élément.

Vous voudrez peut-être une image d’atterrissage avec un menu de navigation situé en dessous. Lorsque vous faites défiler l’image d’atterrissage vers le bas, vous pouvez avoir le menu puis «coller» en haut de la fenêtre.

Par exemple:

.element {
position: sticky; 
top: 0;
}

Notre élément sera relativement positionné jusqu’à ce que l’emplacement de défilement de la fenêtre atteigne celui-ci. Ensuite, il collera à la page dans un fixed position en haut (0) de l’écran.

À ce stade, sticky reste une valeur expérimentale, avec une adoption seulement partielle par les principaux navigateurs:

Pour l’instant au moins, il serait intéressant d’envisager une solution JavaScript si vous cherchez à utiliser cette technique en production.

+ Plus de publications