嵌套元素的绝对定位和z-index

Question

我有一个深层嵌套的自定义下拉菜单（.options），我想在其他所有内容上显示，但相对于其父级定位。但是，如果这恰好位于我的页面底部附近，页脚将始终绘制在页面顶部。我无法想象得到这个深层嵌套的菜单总是显示在上面。

＆＃13;

＆＃13;

.item {
    position: relative;
}
.options {
    position: absolute;
    z-index: 999;
    top: 10px;
    left: 10px;
}

＆＃13;

<div class="my-example">
    <div class="list">
        <ul>
            <li class="item"><a href="#" onclick="toggleOptionsMenu();">Click here to see options</a>
                <ul class="options">
                    <li>Option 1</li>
                    <li>Option 2</li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="footer">
        Everything here will always show on top of this options list
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;