Absolutwert style.top eines Vorschlagsfeldes bestimmen

[Linuchs]

Moin,

ich habe mehrere input-Felder für die GEMA-Meldung von Liedern.

Nach Eingabe von mindestens 3 Zeichen sollen Titel vorgeschlagen werden. Dazu ist ein vorhandenes und zu body absolut positioniertes Vorschlagsfeld unter das jeweilge input-Feld zu positionieren und zu öffnen. Der Inhalt kommt später.

Die Position dieses Vorschlagsfeldes ermittle ich, in dem die Links- und Oben-Werte des input und seiner parents aufsummiert werden.

Bei left funktioniert das auch, aber bei top nicht. Wieso meldet ein td, dass er 53px oben-Abstand hat zu seinem tr und der oberste tr auch 53px zu tbody? Habe das per console.log dokumentiert:

  var obj_vorschlaege = document.getElementById( "vorschlaege" );
  function getLieder( obj ) {
    
    // vorschlagsfeld positionieren und oeffnen
    if ( obj.value.length == 3 ) {
      var div   = obj;
      var left  = div.offsetLeft; // im parent-Element
      var top   = div.offsetTop;  // im parent-Element
      while ( div.tagName != "BODY" ) {
        console.log( div.tagName +" left=[" +div.offsetLeft +"] top=[" +div.offsetTop +"]" );
        div    =  div.parentElement;
        left  +=  div.offsetLeft;
        top   +=  div.offsetTop;
      }
      console.log( "left=[" +left +"]" );
      console.log( "top =[" +top  +"]" );
      obj_vorschlaege.style.left      = left            +"px";
      obj_vorschlaege.style.minWidth  = obj.offsetWidth +"px";
      obj_vorschlaege.style.top       = top             +"px";
      obj_vorschlaege.style.display   = "block";
    }
...

Gruß, Linuchs