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

Question

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

白色标题为position: fixed;。绿色菜单不是固定的，但具有z-index -1，因为显然这是将其堆叠在白色标题后面的唯一方法。

如何使链接可点击？

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

编辑2：我也尝试将opacity: .99;用于白色标题，但没有结果。

.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 {
    min-height: 40px;
    margin-top: 107px;
    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

z-index仅适用于定位的元素（位置：绝对，位置：相对，位置：固定或位置：粘性）。

具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前。

来源：https://www.w3schools.com/cssref/pr_pos_z-index.asp