Menu
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
436
z-index only works on positioned elements (relative, absolute, fixed, sticky) so if you set a z-index on an element with a static position, it won't work.
Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).
The maximum range is ±2147483647. In CSS code bases, you'll often see z-index values of 999, 9999 or 99999.
The z-index property determines the stack level of an HTML element. The “stack level” refers to the element's position on the Z axis (as opposed to the X axis or Y axis). A higher value means the element will be closer to the top of the stacking order.
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.
164
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.
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
