html - when div with absolute position is added cannot click on links

ID : 131371

viewed : 8

Tags : htmlcsshtml

Top 5 Answer for html - when div with absolute position is added cannot click on links

vote vote

93

CSS - to unblock clicking add to #left_border class following statement:

pointer-events: none  

(it is cross-browser solution including >= IE11)

Here is source of this solution with more informations. I tested it on chrome, firefox and safari (macOs and iOS) and works :)

If you like this answer buy me a coffee

vote vote

90

Add a z-index:-1; This will allow the links to be clicked. As The Div is absolutely positioned over the links and hence it is not allowing clickability.

 #left_border {     background-image: url(http://tax.allfaces.lv/templates/tax/images/ena.png);     background-position: 0 0;     background-repeat: no-repeat;     width: 1094px;     background-size: 100% auto;     position: absolute;     height: 850px;     left: -51px;    top: 0px;     z-index:-1; }   

Here is the Working Solution for the same.

Hope this Helps.

vote vote

77

put z-index:1 to that component which has absolute property.

for example:

function myFunction() {    document.getElementById("print").innerHTML = "Hello World";  }
.custcontainer {      position: relative;        }  .custcontainer .like {      position: absolute;      top: 18%;      left: 10%;      transform: translate(-50%, -50%);      -ms-transform: translate(-50%, -50%);        cursor: pointer;      font-size:30px;      text-align: center;      z-index: 1;  }
<div class="custcontainer">    <P id="print"></p>    <button onclick="myFunction()" class="like">like</button>    <img src="https://www.crownplumbing.co/wp-content/uploads/2015/07/placeholder.gif"/>  </div>

vote vote

67

Add position:relative to #menu

#menu {     position:relative; } 

JS Fiddle Demo

vote vote

59

you have a problem with z-index..

it is covering the menu elements:

 #left_border {     background-image: url(http://tax.allfaces.lv/templates/tax/images/ena.png);     background-position: 0 0;     background-repeat: no-repeat;     width: 1094px;     background-size: 100% auto;     position: absolute;     height: 850px;     left: -51px;     top: 0px;     z-index:-111; } 

http://jsfiddle.net/Dq6F4/2/

Top 3 video Explaining html - when div with absolute position is added cannot click on links

Related QUESTION?