La position absolute permet de positionner un élément par rapport à son premier ancêtre qui a une position autre que static. C’est-à-dire une position fixed, relative ou absolute.

Ici, le premier ancêtre de child ayant une position autre que static est parent:

<div class="parent">
  1
  <div class="child">2</div>
</div>

.parent {
  position: relative;
} 

.child { 
  position: absolute;
  top: 30px;
  right: 30px;
}

L’élément 2 **se positionne par rapport à l’élément 1

Ici, le premier ancêtre de child ayant une position autre que static est grandparent:

<div class="grandparent">
  1
  <div class="parent">
    2
    <div class="child">3</div>
  </div>
</div>

.grandparent {
  position: fixed;
}

.child {
  position: absolute;
  bottom: 30px;
  left: 0;
}

Bien qu’il soit à l’intérieur de l’élément 2, l’élément 3 se positionne par rapport à l’élément 1

<aside> ☝ Si l’élément en position absolute n’a aucun ancêtre en position autre que static, il se positionne par rapport au body.

</aside>

<aside> ⬅️ Position relative

</aside>