<style>
    .boundary { overflow: hidden; width: 100px; height: 50px; }
</style>
<div>
    <div class="boundary" style="height: 150px;">
        <div style="position: relative;">
            <div style="height: 10px;"></div>
            <div class="boundary" style="position: absolute;">
                <div id="first" style="background-color: red; width: 0; height: 50px;">
                </div>
            </div>
            <div class="boundary" style="margin-top: 50px;">
                <div id="second" style="background-color: red; width: 0; height: 59px;">
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function test()
    {
        var first = document.getElementById("first");
        var second = document.getElementById("second");
        first.style.width = "100px";
        first.style.backgroundColor="green";
        second.style.width = "100px";
        second.style.backgroundColor="green";
    }

    document.body.offsetTop;
    test();
</script>