css - 响应式菜单被主要内容隐藏

Question

我已将这个简单的水平菜单集成到我的网络应用程序的所有页面中。

https://jsfiddle.net/3u6m4b1w/

当页面全屏打开时，一切正常(见图):

但是当我切换到响应式时(见图 2)，我遇到了这个奇怪的问题:

黄色的警告框变大，菜单隐藏在主要内容后面!

我已经尝试过使用 z-index，例如:

.nav-list-pagina { z-index:9999; }

但什么也没发生。

我想获得的是这个(photoshop 编辑):

谁能帮我找到正确的 CSS？

用最后的 JQUERY 更新了 FIDDLE

Answer 1

试试这段代码，应该可以处理重叠。

.nav-list-pagina {
    z-index: 2;
    position: relative;
}