Introducere în Web Development

Un alt tip de poziționare este cea absolută, definită cu:

                    position: absolute;
                

În poziționarea absolută, elementul este poziționat relativ la marginile documentului cu totul. Față de poziționarea fixă, elementul se va mișca la scroll.

Dacă elementul se află în interiorul altui element cu poziționare (adică orice în afară de static), poziționarea se va face relativ la acel element.

Un truc folosit uneori este să punem position: relative (care nu modifică poziția elementului dacă nu îi dăm inset) pe un element părinte sau strămoș, iar elementul curent îl poziționăm absolut.

                    <div class="parent">
  <span class="curent">
    Absolut
  </span>
</div>
                

                    .parent {
  position: relative;
}

.curent {
  position: absolute;
  inset: 0 0 auto auto;
}
                

De multe ori, însă, în locul acestui truc putem folosi Grid Layout.

Pentru a defini poziționarea absolută, se folosește inset. Putem folosi inclusiv valori negative dacă vrem să ieșim în afara elementului în care ne-am poziționat.

                    .close {
  position: absolute;
  inset-block-start: 0; /* top */
  inset-inline-end: 0; /* right */

  translate: 50% -50%; /* spoiler */
}