标头中的导航项无效

Question

我有一个奇怪的问题..我有一个带图像背景的标题..我想为该图像添加一些不透明度，所以我在标题之前创建了另一个div（#main）并给它相同的宽度和高度以及绝对位置，当然还有背景：rgba（0,0,0,0.2）负责添加不透明度。问题是标题包含一个导航栏，但现在应用该技巧后，这些导航项目无法点击，也不会悬停。 这是css代码：

 #main {
        height: 540px;
        width:100%;
        background: rgba(0,0,0,0.2);
        position:absolute;
    }
    header{
        margin:0;
        padding: 10px 0px 10px 10px;
        height: 540px;
        width:auto;
        background: url('../img/cover.png') center center;
        background-size: cover;
        color:white; 
    }

Answer 1

尝试向导航元素添加z-index，其中包含导航链接

nav {
    z-index:2;
    position:relative;
}

Fiddle example