заметил такую штуку. навешивает событие на элемент. кликаем на дочерний элемент и показываются координаты дочернего элемента
<!DOCTYPE html>
<html>
<head>
<title>example</title>
<link rel="stylesheet" type="text/css" href="lib/font-awesome-4.3.0/css/font-awesome.css">
<style>
.bl1 {
width: 200px;
height: 100px;
border: 1px solid black;
position: relative;
}
.bl2 {
width: 70px;
height: 70px;
border: 1px solid black;
position: absolute;
top: 10px;
left: 50px;
}
</style>
</head>
<body>
<div class="bl1">
<div class="bl2"></div>
</div>
<script>
document.querySelector('.bl1').onclick = function (e) {
console.log(e);
console.log(e.offsetX);
}
</script>
</body>
</html>