阻止父卷轴上的绝对子div

Question

如何让我的子div覆盖父级但不让父级滚动？我的孩子div需要像一个弹出窗口，填充viewport并滚动内容，但不应该滚动任何传递它的viewport。一旦被解雇，它可以按原样滚动父母。我正在尝试找到一个纯CSS修复。

<div id="main">
<div>
    <table>
        <tr><td>Enough to cause an overflow/td></tr>
    </table>
</div>
<div>
    <div class="top-nav">
    </div>
    <div class="content-nav">
        <div>
            <li>This is my overlay content</li>
            <li>This is my overlay content</li>
            <li>This is my overlay content</li>             
        </div>
    </div>
</div>
</div>

JSFiddle