51

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/

renathy
  • 5,125
  • 20
  • 85
  • 149

10 Answers10

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

General Grievance
  • 4,555
  • 31
  • 31
  • 45
Kamil Kiełczewski
  • 85,173
  • 29
  • 368
  • 345
26

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.

Nitesh
  • 15,425
  • 4
  • 48
  • 60
  • 3
    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
  • 2
    I can second @Kevin Ghadyani. My issue was actually CAUSED by `z-index: -1`. Please don't use negative `z-index`. It will cause more headaches than resolutions. – G M Jun 25 '22 at 02:01
12

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>
Aditya Parmar
  • 1,139
  • 13
  • 22
6

Add position:relative to #menu

#menu
{
    position:relative;
}

JS Fiddle Demo

Sachin
  • 40,216
  • 7
  • 90
  • 102
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/

Dory Zidon
  • 10,497
  • 2
  • 25
  • 39
2

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

#left_border{
  width:50px;
}
Yotam Omer
  • 15,310
  • 11
  • 62
  • 65
1

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
Borniet
  • 3,544
  • 4
  • 24
  • 33
1

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

user3895331
  • 11
  • 1
  • 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
1

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

Alex Cory
  • 10,635
  • 10
  • 52
  • 62
1

The answer is z-index. If your div element positioned as fixed or absolute (not relative), then you are telling the browser to render your DOM elements as layer instead of default sequence. Since your div is using "absolute" as positioning you need to set the order of layers properly to keep the clickable DOM element above. Default z-index is zero. Setting your link element to 1 should work. If there are other elements above the base layer than increase the z-index layer accordingly. Setting base layer as negative z-index is another option but it would be complex if you have a lot of layers between top and base layer.

#link_element {
    z-index:1;
}
esenkaya
  • 99
  • 4