JSFiddle - React, Tailwind, and code Playground

by ecmanaut

HTML

<div id="test">
TEST TEST    
</div>

<div id="console">
    
</div>

CSS

#test {
    width: 100px;
    height: 100px;   
    background-color: green;
    position: absolute;
    left: 50px;
    top: 50px;
    
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
}

#console {
 margin-top: 150px;
 padding: 5px;
 background-color: #ddd;   
}

JavaScript

var pos = $('#test').position();
var off = $('#test').offset();
var left = $('#test').css('left');
var top = $('#test').css('top');
var real = getViewOffset($('#test')[0]);

$('#console').append('<p>position left: '+pos.left+'</p>');
$('#console').append('<p>position top: '+pos.top+'</p>');
$('#console').append('<p>offset left: '+off.left+'</p>');
$('#console').append('<p>offset top: '+off.top+'</p>');
$('#console').append('<p>css left: '+left+'</p>');
$('#console').append('<p>css top: '+top+'</p>');
$('#console').append('<p>real top: '+real.top+'</p>');
$('#console').append('<p>real left: '+real.top+'</p>');

function getViewOffset(node) {
  var x = 0, y = 0, win = node.ownerDocument.defaultView || window;
  if (node) addOffset(node);
  return { left: x, top: y };

  function getStyle(node) {
    return node.currentStyle || // IE
           win.getComputedStyle(node, '');
  }

  function addOffset(node) {
    var p = node.offsetParent, style, X, Y;
    x += parseInt(node.offsetLeft, 10) || 0;
    y += parseInt(node.offsetTop, 10) || 0;

    if (p) {
      x -= parseInt(p.scrollLeft, 10) || 0;
      y -= parseInt(p.scrollTop, 10) || 0;

      if (p.nodeType == 1) {
        var parentStyle = getStyle(p)
          , localName   = p.localName
          , parent      = node.parentNode;
        if (parentStyle.position != 'static') {
          x += parseInt(parentStyle.borderLeftWidth, 10) || 0;
          y += parseInt(parentStyle.borderTopWidth, 10) || 0;

          if (localName == 'TABLE') {
            x += parseInt(parentStyle.paddingLeft, 10) || 0;
            y += parseInt(parentStyle.paddingTop, 10) || 0;
          }
          else if (localName == 'BODY') {
            style = getStyle(node);
            x += parseInt(style.marginLeft, 10) || 0;
            y += parseInt(style.marginTop, 10) || 0;
          }
        }
        else if (localName == 'BODY') {
          x += parseInt(parentStyle.borderLeftWidth, 10) || 0;
          y +=...