jQuery element position

by mingjian sun

HTML

<div id='content'>
  <div class="parentDiv">
    <div class="child childDiv1">
      Hello World
    </div>
    <div class="child childDiv2">
      I'm Fine.
    </div>
  </div>
</div>


<div id='msgDiv'>

</div>

CSS

#content {
  position: relative;
  border: 1px solid #ccc;
}

.parentDiv {
  transform: scale(0.8);
  width: 100%;
  height: 100px;
  border: 1px solid red;
}

.child {
  border: 1px solid #ccc;
  border-radius: 2px;
  display: inline;
}

.child.childDiv1 {
  position: absolute;
  left: 10px;
  top: 20px;
}

.child.childDiv2 {
  position: absolute;
  left: 20px;
  top: 50px;
}

JavaScript

$(document).ready(function() {
  var $child1 = $(".child.childDiv1");
  var $child2 = $(".child.childDiv2");

  var msg = "for 'Hello World'>>>>> <br>";
  msg = msg + "DOM offsetLeft: " + $child1[0].offsetLeft + "<br>";
  msg = msg + "DOM offsetTop:  " + $child1[0].offsetTop + "<br>";
  msg = msg + "<br>"
  msg = msg + "jQuery positon Left: " + $child1.position().left + "<br>";
  msg = msg + "jQuery positon Top: " + $child1.position().top + "<br>";
  msg = msg + "<br>";
  msg = msg + "jQuery offset Left: " + $child1.offset().left + "<br>";
  msg = msg + "jQuery offset Top: " + $child1.offset().top + "<br>";
  msg = msg + "<<<<<<<";
  $("#msgDiv").html(msg);
});