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，带有 icon-bar 类的 div 也出现在前面，但是当我尝试单击该 div 内的链接之一时，它没有得到点击，我已经为这个 div 设置了 100 的 z-index 但它无法点击，请帮助我解决这些问题

Answer 1

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