<!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>