JSFiddle - React, Tailwind, and code Playground

by letanure

HTML

<div id="elementoPai">
    Pai
    <span id="elementoFilho">
        Filho
    </span>
    
</div>

<ol id="resultados"></ol>

CSS

body{
    padding: 0;
    background-color: #ccc;
}
#elementoPai{
    background-color: green;
    width: 300px;
    height: 300px;
    position: relative;margin: 20px;
}
#elementoFilho{
    background-color: blue;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50px;
    left: 70px;
}

JavaScript

var $resultados = $('#resultados')
$('#elementoPai, #elementoFilho').each(function(index, elemento){
    var $elemento = $(elemento);
    var position = $elemento.position();
    var offset = $elemento.offset();
    var $pai = elemento.parentElement.tagName
    console.log( $pai );
    $resultados.append( 
        '<li>POSITION: #' + elemento.id + ' está a '
         + position.top + 'px top e  '
         + position.left + 'px left do elemento '
         + $pai
         + '</li>' 
         + '<li>OFFSET: #' + elemento.id + ' está a '
         + offset.top + 'px top e  '
         + offset.left + 'px left do elemento '
         + $pai
         + '</li>' 
                      );
});