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

Question

I have the following html and 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> 

Now the background image is appearing, as well as the overlay div as expected, the div with the icon-bar class also appears in the front, but when I try to click one of the links inside that div it does not get the click, i have set a z-index of 100 for this div but it is unclickable, please assist me on this guys

Answer 1

You can add pointer-events: none to the overlay div. This will allow clicking the links behind it.

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

I think I got your point here. What's wrong in your code is where you position <div id="overlay"></div>

It should place after the end tag of cover-photo

I also rearrange your codes and modify some it.

My advise is not to make to have negative z-index instead use smaller to greater number to overlap the property of one element to another.

 #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>