pozycja elementu względem jego "dziadka"

Question

Witam, 

Mam taki problem,

potrzebuje pobrać odległość od linka do lewej krawędzi przeglądarki. Robie to w javaScript za pomocą offsetLeft. Wszystko byłoby pieknie gdyby nie to że offsetLeft odnosi się do elementu nadrzędnego który ma "position: relative" a tak się składa że mój wspomniany link jest w znaczniku "<li>" który musi mieć również nadaną pozycję  "relative" .

Jak zrobić żeby "skoczyć" do kolejnego elementu nadrzędnego który ma pozycję relatywną jakim jest w moim przypadku "nav" , i właśnie jego względem chciałbym pobrać "offsetLeft" dla ".link". Próbuje za pomocą "offsetParent" ale coś robię źle, bardzo proszę o pomoc.

HTML:

<nav class="navbar">
    <div class="container">
      <div class="logo"></div>
      <div class="menu">
        <ul class="menu__list">
          <li><a href="" class="link">ZALOGUJ SIĘ</a></li>
        </ul>
      </div>
    </div>
</nav>

CSS: 

.navbar {

position: relative:
width:100%;
height: 100px;

}

li {

position: relative;

}

link {

font-size: 18px;

}

javaScript:

let link = document.querySelector('.link');

link.addEventListener('load', () => {

          console.log(link.offsetLeft)
          console.log(link.offsetWidth)
          console.log(link.offsetParent)
          console.log(link.offsetParent.offsetParent)


          leftPosition = link.offsetLeft + (link.offsetWidth / 2) - (zip.offsetWidth / 2);
          zip.style.left= leftPosition + 'px';

})

Powyższy skrypt zadziałałby gdyby nie to że element "li" ma "position: relative" , ale tak jak wspomniałem musi mieć. Bardzo będę wdzięczny za pomoc, pozdrawiam

Answer 1

Rozwiązaniem Twojego problemu będzie funkcja getBoundingClientRect. Dzięki niej dla dwóch elementów możesz pobrać, jaki jest ich offset względem okna (nie elementu rodzica). Po odjęciu od siebie tych wartości i wzięciu pod uwagę błędu związanego z szerokością elementu (czyli od otrzymanej różnicy powinieneś odjąc szerokość elementu ustawionego bardziej po lewej), otrzymasz interesujący Cie wynik.

Pozdrawiam

Comments

Super ! własnie kojarzyłem że jest taka funkcja tylko nie pamiętałem nazwy :)

Dziękuję bardzo, pozdrawiam

---

Ciesze się że mogłem pomóc :)