{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 太酷不给撩 的问题《Link using z-index can't be clicked even thoug》','https://www.manongdao.com/q-548785.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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
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:relativeto the link to get the expected behaviour, because without explicit positioning z-index will not do anything.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-eventsfrom 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.
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/
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).
You can also use
visibility: hiddenfor 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/