when div with absolute position is added cannot click on links

Question

I have menu on a page and div that is absolute positioned. The problem is that when this div is on a page, then I cannot click on any links in menu items.

When I re

Answer 1

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 :)

Answer 2

Use Google Chrome or Mozilla Firefox's Developer tools to hover over your links and divs (or select them). This way you can see what is going on, and most probably, there is another div or other object stacked on top of your links, which is preventing your from clicking them. Firefox also has a 3D option, which visualizes all this even better:

https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/3D_view

Answer 3

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>

Answer 4

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/

Answer 5

I found a very simple solution that works!I set the left to a percentage-it was in pixels- and added a margin-left in pixels.And that worked like a charm!! http://2letscode.blogspot.com/2014/07/links-not-clickable-when-inside.html

Answer 6

Add position:relative to #menu

#menu
{
    position:relative;
}

JS Fiddle Demo