header 中的导航项无法正常工作

Question

我有一个奇怪的问题..我有一个带有图像背景的 header..我想为该图像添加一些不透明度，所以我在header 并赋予它相同的宽度和高度以及绝对位置，当然还有背景：负责添加不透明度的 rgba(0,0,0,0.2) 。问题是 header 包含一个导航栏，但现在在应用该技巧后，这些导航项既不能被点击也不能悬停.. 这是 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

header 中的导航项无法正常工作

nav items in header not working

css

opacity