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

Question

I'm puzzled! The green menu is stacked behind the white header with search field. This is needed to display the page correctly, but now the green menus links become unclickable.

The white header is position: fixed; . The green menu is not fixed but has z-index -1 because apparently this is the only way to stack it behind the white header.

How do I make the links clickable?

Edit:
I tried z-index: 99; aswell as z-index: -99; for both elements. Literally the only way to stack the green menu behind the white header is to use a negative z-index number for the green menu.

Edit 2:
I also tried using opacity: .99; for the white header but no results.

.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

组的z-index为.header作为2和用于#menu为1