<div id="wrap">
	<div id="main">
		<div id="block">
			<p id="el">hi</p>
		</div>
	</div>

	<div id="result">
		<div class="result">
			<span>Parent top:</span>
			<span id="parent-top">0</span>
		</div>
		<div class="result">
			<span>Parent left:</span>
			<span id="parent-lft">0</span>
		</div>
		<div class="result">
			<span>Child top:</span>
			<span id="child-r-top">0</span>
		</div>
		<div class="result">
			<span>Child left:</span>
			<span id="child-r-lft">0</span>
		</div>
		<div class="result">
			<strong>Child to parent top:</strong>
			<span id="child-top">0</span>
		</div>
		<div class="result">
			<strong>Child to parent left:</strong>
			<span id="child-lft">0</span>
		</div>
	</div>
</div>
html,
body {
	padding: 0;
	margin: 0;
	background-color: #fff;
	font-family: monospace;
	font-size: 18px;
	line-height: 1.4;
	color: #333;
}

* {
	box-sizing: border-box;
}

#wrap {
	padding: 40px;
	height: 3000px;
	width: 100%;
	min-width: 600px;
}

#main {
	padding: 60px;
}

#el {
	padding: 10px;
	border: 1px solid #f00;
}

#result {
	margin-top: 20px;
	position: sticky;
	top: 20px;
}

.result {
	margin-bottom: 10px;

	&:last-child {
		margin-bottom: 0;
	}
}
View Compiled
function getPosition() {
	var $el = $('#el'),
		$main = $('#main'),
		winScrollTop = $(window).scrollTop(),
		winScrollLft = $(window).scrollLeft(),
		mainXPos = $main.offset().left - winScrollLft,
		mainYPos = $main.offset().top - winScrollTop,
		elXPos = $el.offset().left - winScrollLft,
		elYPos = $el.offset().top - winScrollTop,
		elXTruePos = elXPos - mainXPos,
		elYTruePos = elYPos - mainYPos;

	$('#parent-top').text(mainYPos);
	$('#parent-lft').text(mainXPos);
	$('#child-top').text(elYTruePos);
	$('#child-lft').text(elXTruePos);
	$('#child-r-top').text(elYPos);
	$('#child-r-lft').text(elXPos);
}

$(function () {
	getPosition();
});

$(window).on('scroll resize', function () {
	getPosition();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js