CODEWITHSUNDEEP
htmlcssz-index
Alex
Alex

Reputation: 1081

Link using z-index can't be clicked even though it's on top, in both Firefox & IE

I'm trying to get a text link to appear on top of a partly-transparent image, which in turn is on top of a plain coloured background. I want the link-text and image to print when the page is printed, but not the coloured background. (Which is why I'm not using the background-image property)

The problem is that although the link appears on top of the image, and the image appears on top of the background as desired, the link cannot be clicked. It seems to me that if the link appears on top then it should be susceptible to mouse events...

This happens in at least the following browsers: Firefox 6.0 (Windows + Linux), Firefox 3.6 (Windows) and Internet Explorer 7.

Please would somebody tell me if this is a problem with my HTML/CSS, or with the browsers?

Here is some HTML to demonstrate the problem: 

<html>

  <head>         

    <title>Test</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  </head>

  <body>                               

    <div style="position: relative;z-index: -2; background-color:#333; height:200px;">

      <img style="position: absolute;top: 0;left: 0;z-index: -1;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png" alt="Dice" />  

      <a style="padding:50px; color:#fff;z-index:0;" href="#">Can you click me?</a>

    </div>

  </body>

</html>

Cheers!

Alex

Upvotes: 34

Views: 61056

Answers (4)

connect2Coder
connect2Coder

Reputation: 1130

None of the above solution worked for my specific problem. I would recommend using above solutions first and if that does not work set pointer events to none (does not work for IE<=10). 

.some-horizontal-container {
  pointer-events: none;
}

You can also use visibility: hidden for the div that overlays the clickable element under it.

Please check out this article for more details:https://blog.lysender.com/2014/09/css-elements-covered-by-a-container-div-not-clickable/

Upvotes: 5

Nate Anderson
Nate Anderson

Reputation: 21084

In my case I was dealing with some unexplained pointer-events in CSS (specifically the value all), which caused some elements to catch events apparently triggered from a different (non-ancestor!) part of the DOM.

I removed all pointer-events from the CSS.

I know this question already has an accepted answer, but my symptoms match the OP, so maybe my tip might help a future struggler like me.

Upvotes: 7

jjmontes
jjmontes

Reputation: 26904

Two notes:

1) The z-index attribute can only be used on positioned elements (absolute, relative or fixed). Your element is not.

2) [Edited: Not related] Your top element (the with z-index: 0) is located inside your background element (the with z-index: -2).

The following works, you can play with it at: http://jsfiddle.net/5MpFn/

<html>

  <head>         

    <title>Test</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  </head>

  <body>                               

    <div style="position: relative;z-index: -2; background-color:#333; height:200px;">

      <img style="position: absolute;top: 0;left: 0;z-index: -1;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png" alt="Dice" />  



    </div>

      <div style="position: absolute; top: 0;left: 0; padding:50px; z-index:0;" >
      <a href="#" style="color:#fff;">Can you click me?</a>      
      </div>

  </body>

</html>

Upvotes: 4

shanethehat
shanethehat

Reputation: 15570

The issue is mainly caused using negative z-index values, which seems to be making the parent div capture the mouse events. Use positive indexes, and assign position:relative to the link to get the expected behaviour, because without explicit positioning z-index will not do anything.

Upvotes: 62

Related Questions