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设置了一个100的z-index，但它是不可点击的，请帮助我这个人

Answer 1

您可以将pointer-events: none添加到重叠div。这样就可以点击它背后的链接。

Answer 2

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

Answer 3

我想我明白了你的观点。您的代码中出现的问题是unsigned char

的位置

它应放在<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;
}

CSS图像背景和叠加屏蔽链接和文本输入点击和焦点

3 个答案: