主要内容隐藏了响应式菜单

Question

我已经将此简单的水平菜单集成到了Web应用程序的所有页面中。

https://jsfiddle.net/3u6m4b1w/

全屏打开页面时，一切正常（请参见图片）：

但是当我切换到响应式（参见图2）时，我遇到了一个奇怪的问题：

黄色的警报框越来越高，菜单隐藏在主要内容后面！

我已经尝试使用z-index之类的

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

但什么都没发生。

我想要获得的是这个（由photoshop编辑）：

任何人都可以帮助我找到正确的CSS吗？

使用最后一个查询更新字段

Answer 1

我想您可以将clear: both; CSS属性添加到.alert类中：

.alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    clear: both;
}

Answer 2

尝试此代码，应该可以重叠使用。

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