当堆叠在其他（固定）元素后面时，元素上的链接变得不可点击

Question

我很纳闷！绿色菜单堆叠在带有搜索字段的白色 header 后面。这是正确显示页面所必需的，但现在绿色菜单链接变得不可点击。

白色header是position: fixed;。绿色菜单不是固定的，但有 z-index -1 因为显然这是将它堆叠在白色 header.

后面的唯一方法

如何使链接可点击？

编辑：
我对这两个元素都尝试了 z-index: 99; 和 z-index: -99;。从字面上看，将绿色菜单堆叠在白色 header 后面的唯一方法是对绿色菜单使用负数 z-index。

编辑 2：
我也尝试过使用 opacity: .99; 作为白色 header 但没有结果。

.header {
    margin: 32px 0 0 0;
    padding: 0;
    width: 100%;
    height: 75px;
    background-color: rgba(255,255,255,0.75);
    border-top: 2px solid rgba(55,175,75,1.00);
    border-bottom: 5px solid rgba(55,175,75,1.00);
    box-shadow: 0 5px 10px rgba(0,0,0,0.4);
    position: fixed;
    z-index: 1;
}

#menu {
    position: fixed;
    margin-top: 107px;
    min-height: 40px;
    width: 100%;
    background-color: rgba(55,175,75,1.00);
    border: 1px solid rgba(55,175,75,1.00);
    border-radius: 0;
    z-index: -1;
}

Answer 1

将 .header 的 z-index 设置为 2，将 #menu 的 z-index 设置为 1

当堆叠在其他（固定）元素后面时，元素上的链接变得不可点击

Links on element become unclickable when stacked behind other (fixed) element

html

css

overlapping