CSS 图像背景和叠加层阻止链接和文本输入单击和焦点

Question

我有以下html和css：

.icon-bar {
width: 90px;
z-index: 100;
position: absolute;
}
#overlay {
position: absolute;
background-color: rgba(0,0,0,0.8);
top:0;
left: 0;
bottom:0;
height:100%;
width:100%;
z-index: -2;
}
#cover-photo {
width:100%;height: 400px;    
background:url('./assets/covers.jpg') no-repeat center center fixed;
color:#fff;
background-size:cover;
text-align: center;
z-index: -1;
}

<div class="row">
<div class="col-md-12" id="cover-photo">
<div id="overlay">
</div>
<div class="icon-bar col-md-push-10">
<a class="active" href="#"><i class="fa fa-home"></i></a> 
<a href="#"><i class="fa fa-search"></i></a> 
<a href="#"><i class="fa fa-envelope"></i></a> 
<a href="#"><i class="fa fa-globe"></i></a>
<a href="#"><i class="fa fa-trash"></i></a> 
</div>
</div>
</div>

现在出现了背景图像，以及预期的叠加div，带有图标栏类的div 也出现在前面，但是当我尝试单击该div 中的一个链接时，它没有得到点击，我为此div 设置了一个 z-index 100，但它是不可点击的， 请协助我做这个家伙

Answer 1

您可以将pointer-events: none添加到叠加层div。这将允许单击其后面的链接。

Answer 2

我想我明白你的意思了。代码中的错误在于您定位<div id="overlay"></div>

它应该放在cover-photo的结束标签之后

我还重新排列了您的代码并修改了一些代码。

我的建议是不要使用负z-index而是使用更小到更大的数字来将一个元素的属性重叠到另一个元素。

#cover-photo {
width: 100%;
height: auto;
background: url('./assets/covers.jpg') no-repeat center center fixed;
color: #fff;
background-size: cover;
text-align: center;
z-index: 5;
}
.icon-bar {
width: 90px;
z-index: 100;
position: relative;
}
#overlay {
position: fixed;
background-color: rgba(0, 0, 0, 0.8);
top: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
z-index: 1;
}

<div class="row">
<div class="col-md-12" id="cover-photo">
<div class="icon-bar col-md-push-10">
<a class="active" href="#"><i class="fa fa-home"></i></a>
<a href="#"><i class="fa fa-search"></i></a>
<a href="#"><i class="fa fa-envelope"></i></a>
<a href="#"><i class="fa fa-globe"></i></a>
<a href="#"><i class="fa fa-trash"></i></a>
</div>
</div>
<div id="overlay"></div>
</div>

Answer 3

I think it is because of anchor tag it is inline tag 
try to make it inline-block so it will work.
Check below link
https://jsfiddle.net/ashishbhalerao/Ldot4y96/4/
Thanks,
Ashish Bhalerao