标题中的导航项目不起作用答案

【问题标题】：nav items in header not working标题中的导航项目不起作用
【发布时间】：2015-01-16 15:54:06
【问题描述】：

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

【问题讨论】：

标签： css opacity

【解决方案1】：

尝试在包含导航链接的导航元素中添加z-index

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

Fiddle example

【讨论】：