<!DOCTYPE html>
<style>
#container { overflow:hidden; width:40px; height:40px; background:red; }
#abspos { position:absolute; display:none; width:40px; height:20px; background:green; }
#sibling { margin-top:20px; width:40px; height:20px; background:green; }
</style>
<p>There should be a green square below, and no red.</p>
<div id="container">
<span>
<div id="abspos"></div><div id="sibling"></div>
</span>
</div>
<script>
document.body.offsetTop;
abspos.style.display = "block";
</script>