La position fixed permet de positionner un élément par rapport à la fenêtre du navigateur.

Au scroll, l'élément restera toujours au même endroit.

Ici, on positionne le premier élément tout en haut à gauche de la fenêtre (0):

<div class="fixed-element">1</div>
<div>2</div>
<div>3</div>

.fixed-element {
  position: fixed;
  top: 0;
  left: 0;
}

<aside> ☝ Comme l'élément 1 n'est plus dans le cours normal de la page, il n'interagit plus avec les autres éléments. C'est donc l'élément 2 qui se retrouve en haut de la page.

</aside>

On peut utiliser des pixels, mais aussi des pourcentages pour positionner l'élément:

.fixed-element {
  position: absolute;
  top: 50%;
  bottom: 0;
  left: 20px;
}

<aside> ⬅️ Fonctionnement

</aside>

<aside> ➡️ Position relative

</aside>