offsetLeft, offsetTop eines fließenden Textabsatzes

[Linuchs]

Hallo Martin,

offsetLeft und offsetTop sind relativ zum Elternelement.

Das weiß ich und lasse die Elternelemente durchlaufen:

  let obj_1 = document.getElementById(id1);
  let x1    = 0;
  let y1    = 0;
  while ( obj_1.style.position != "relative" && obj_1.tagName != "body" ) {
    x1  +=  obj_1.offsetLeft;     // x-Pixel addieren
    y1  +=  obj_1.offsetTop;      // y-Pixel addieren
    console.log( "x1=[" +x1 +"] y1=[" +y1 +"]" );
    obj_1 = obj_1.parentElement;
  }

Die offsets der Vorfahrenelemente

Verstehe ich nicht, HTML-mäßig davor auf gleicher Ebene ist die Grafik. Die wäre wohl ein sibling, aber das Stichwort fehlt in deinem Link.

<div id=canvas_1 class=mb05 style="position:relative; height:10em;">
  <div class=li style="position:relative; width:10em; height:10em;">
    <img src="img/animiertes_segelboot.gif" style="width:100%;height:100%" alt="Segelschiff" />
    <div class=anker id=fock        style="left:20%; top:65%"></div>
    <div class=anker id=gross       style="left:42%; top:50%"></div>
    <div class=anker id=besan       style="left:65%; top:50%"></div>
  </div>
  <p><b>Segel eines Dreimasters:</b></p>
  <p id=fock_x>Fock</p>
  <p id=gross_x>Grosssegel</p>
  <p id=besan_x>Besansegel</p>
  <div class=clear></div>
  <script>
  // die transparente SVG-Grafik, die id=canvas_1 mit position:absolute vollflächig bedeckt
  </script>
</div>