Positions

Absolute

Regulièrement, quand je vois des gens apprendre à faire du web tout seuls après avoir utilisé figma, je trouve la ligne de CSS ci-dessous absolument partout.

position: absolute;

Parce que si vous ne faites rien de special, ni auto-layouts (qui sont juste des flexboxes), ni grid, alors c'est comme ça qu'il vous placera vos éléments dans la page.

C'est bien beau tout ça, mais qu'est ce que ça veux dire une position absolue?

Plutôt que de suivre le flow de disposition des éléments, qu'il soit "blocs et inlines", "flex", ou "grid", les éléments sont placés par dessus tout ça via des coordoonées, comme ceci:

position: absolute;
top: 50px;
right: 50px;

Vous avez remarqués le petit bloc jaune en haut à droite de la page? C'est lui. Il est hors du flow du document, par-dessus.

right:50px; veux dire que son bord droit est à 50 pixels du bords droit du document.

top:50px; veux dire que son bord supérieur est à 50 pixels du bords supérieur du document.

On a aussi bottom et left dans la même idée.

C'est facile, c'est simple, c'est sexy, pouquoi on ne fait pas tout comme ça?

Parce qu'on s'assoit sur toute la logique de mise en page gentillement fournie par html/css et les navigateur. Rapidement, on va se retrouver à tout réiventer et se battre avec comment les choses fonctionnent déjà. Techniquement, je peux utiliser un kärcher pour boire de l'eau, mais il va falloir faire beaucoup d'efforts pour ne pas me faire mal. Même idée, peut-être pas la même echelle.

Relative > Absolute

Si on creuse un peu plus comment le positonnement absolu fonctionne, on apprend que l'élément ne se positione pas en fonction des bords du document mais en fonction des bords de sont plus proche parent qui est position: relative; (et par défaut c'est le document).

C'est pratique pour accrocher des éléments à d'autres.

#rel-absolute-demo {
  width: 100%;
  padding: 1rem;
  border: 1px solid grey;
  padding-bottom: 160px;
}

#rel-absolute-demo span {
  position: relative;
}

#rel-absolute-demo img {
  position: absolute;
  top: 1.1em;
  left: 50%;
}

<p id="rel-absolute-demo">
  When life gives you lemons, don’t make lemonade. Make life take the lemons
  back! Get mad! I don’t want your damn lemons, what the hell am I supposed to
  do with these? Demand to see life’s manager! Make life rue the day it thought
  it could give Cave Johnson lemons! Do you know who I am? I’m the man who’s
  gonna burn your house down! With the lemons! I’m gonna get my engineers to
  invent a <span>combustible lemon <img src="assets/img/rel_abs_decorator.png" /> </span>
  that burns your house down!
</p>

Cette démo est un bricolage pas terrible, mais pour illustrer le porpos vous pouvez éditer le texte ci-dessous pour rajouter/retirer du texte et voir que l'image bien attachée au <span>.

When life gives you lemons, don’t make lemonade. Make life take the lemons back! Get mad! I don’t want your damn lemons, what the hell am I supposed to do with these? Demand to see life’s manager! Make life rue the day it thought it could give Cave Johnson lemons! Do you know who I am? I’m the man who’s gonna burn your house down! With the lemons! I’m gonna get my engineers to invent a combustible lemon that burns your house down!

C'est pas super élégant. Pour decorer vos pages, je vous encourage à essayer d'abord avec background-image.

D'ailleurs, un jour on pourra utiliser anchor-positionning plutôt que ce hack, et ce sera super.

Fixed

La position fixed permet de positionner votre élément avec top, right, bottom, et left, comme la position absolute, SAUF QUE l'élément est positionné par rapport à votre écran, et pas par rapport à un ancêtre relatif.

Vous avez remarqué l'élément rouge?

Eh bien il est positionné grâce à :

position: fixed;
top: 50px;
right: 150px;

Sticky

Un élément ayant une position sticky fait partie du document, comme un élément normal. Mais il se comporte comme un fixed quand il s'apprête à sortir du champ de vision.

Donc avec ce CSS, on a cet élément vert ci-après. Qui va garder son bord supérieur à 50 pixels du bord supérieur de l'écran lorsequ'il est sur la sortie.

position: sticky;
top: 50px;
right: 250px;

"Mais, pourquoi son bord droit n'est pas à 250 pixels du bord droit de l'écran?"

top et bottom sont concernés par le scroll vertical, et left et right sont concernés par le scroll horizontal. Cett page n'est pas scrollable horizontalement vers la gauche donc l'élément ne fera jamais une sortie par la droite de l'écran. Donc cette propriété ne sert à rien, sauf à vous donner une illustration.

Sticky avec grid ou flex

Les éléments sticky se collent aux bords de leurs conteneurs. Par défaut c'est la page en entière, mais si un de ses parents est flex ou grid alors l'élément s'y collera plutôt qu'au document.

Mais il y a une subtilité qui peut vous faire croire que ça ne marche pas.

La preuve:

#fucked-sticky-grid {
  display: grid;
  height: 400px;
}

#fucked-sticky-grid p {
  position: sticky;
  top: 100px;
}

Pourquoi?

Parce que par défaut les flexs et grids ont leur propriéte align-items à la valeur stretch, donc mon <p> prend 100% de la hauteur de l'espace qui lui est réservé. Pas vraiment possible de glisser en même temps que le scroll si on prend déjà toute la place.

Pour résoudre ce cas spécifique vous devez donc fournir align-self:start; à l'élément que vous ne voulez pas étirer(stretch).

#unfucked-sticky-grid {
  display: grid;
  height: 400px;
}

#unfucked-sticky-grid p {
  position: sticky;
  align-self: start;
  top: 100px;
}

C'est la fin du chapitre, ci-dessous je met un peu de vide pour m'assurer qu'on peut bien jouer avec les démos.

Curieux va! J'apprécie.