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 remove this div (#left_border), then links are clickable again.

Why?

CSS:

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

HTML:

<div id="wrapper">
<div id="content">
    <div id="left_border"></div>
    <div id="left">
        <div id="menu">
            <ul class="menu">
                <li class="item-101 current active deeper parent"><a href="/">Home</a>

                    <ul>
                        <li class="item-107"><a href="/index.php/home/news">News</a>

                        </li>
                    </ul>
                </li>
                <li class="item-102 deeper parent"><a href="/index.php/merchants-shops">Merchants / Shops</a>
                </li>                    
            </ul>
        </div>
    </div>       
</div>

Here you see, that you cannot click on menu items: http://jsfiddle.net/Dq6F4/

Kamil Kiełczewski · Answer 1 · 2021-05-11T09:12:30.223

71

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

edited May 11 '21 at 09:12

answered Jul 18 '17 at 20:46

Kamil Kiełczewski

71,169
26
324
295

3

As of 2019, this is the best solution I've found. – Kevin Ghadyani Jun 12 '19 at 23:01
2

I f*cking LOVE YOU! THANK YOU! – user3779015 Jul 17 '19 at 13:59
1

Man seriously this answer should be really marked as answer resolved !!! Thanks! – Rapido Jun 01 '20 at 16:05
2

this is the best solution o the internet.. somebody give this guy an award – Gaurav Chavan Jun 19 '20 at 09:19

score 24 · Answer 2 · answered May 27 '13 at 13:13

24

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.

answered May 27 '13 at 13:13

Nitesh

15,091
4
44
55

1

While this might've worked years ago, this solution is no longer applicable. `z-index: -1` is a hack and using it will never work over time. As you can see today, elements with `z-index: -1` no longer show up in Chrome. The preferred solution is `pointer-events: none`. – Kevin Ghadyani Jun 12 '19 at 23:02

Aditya Parmar · Answer 3 · 2018-04-30T18:44:35.763

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>

score 5 · Answer 4 · answered May 27 '13 at 13:13

5

Add position:relative to #menu

#menu
{
    position:relative;
}

JS Fiddle Demo

answered May 27 '13 at 13:13

Sachin

39,043
7
86
102

score 3 · Answer 5 · answered May 27 '13 at 13:14

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/

score 1 · Answer 6 · answered May 27 '13 at 13:15

1

Your problem is actually with #left_border covering the links as overlay. limit it's width.. e.g.

#left_border{
  width:50px;
}

answered May 27 '13 at 13:15

Yotam Omer

14,836
11
58
62

score 0 · Answer 7 · answered May 27 '13 at 13:13

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

score 0 · Answer 8 · answered Jul 31 '14 at 11:08

0

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

answered Jul 31 '14 at 11:08

user3895331

1

Please don't just post a link but describe and demonstrate how it helps to solve the problem. – Jul 31 '14 at 11:09

score 0 · Answer 9 · answered Jan 15 '21 at 06:13

Z-index only works on positioned elements. A positioned elements is an element whose position value is either set to absolute, fixed, relative, or sticky. That is, the element has to be set to any position value other than static, which is the default position value. See this article

when div with absolute position is added cannot click on links

9 Answers9

Linked

Related