Why does opacity negate pointer events?

Question

In the following setup, why does the click event (and any other pointer event) not get fired?

If you remove the opacity: 0.5 line, it will work fine.

http://jsfiddle.net/523ve/

For posterity, in case jsFiddle ever goes down (December 21 is approaching):

HTML:

<div>
    <a>Click</a>
    <p>Paragraph</p>
</div>

CSS:

div { position: relative; margin: 40px; }
a { position: absolute; top: 0; right: 0; }
p { opacity: 0.5; }

JS:

$(document).ready(function(event) {
    $("a").click(function(event) {
        alert("Alert");
    });
});

(Tested in latest stable Chrome and Firefox)

Answer 1

"Since an element with opacity less than 1 is composited from a single offscreen image, content outside of it cannot be layered in z-order between pieces of content inside of it. For the same reason, implementations must create a new stacking context for any element with opacity less than 1. If an element with opacity less than 1 is not positioned, implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with z-index: 0 and opacity: 1..."

http://www.w3.org/TR/css3-color/#transparency

---

EDIT:

Also, your particular example has the <p> element overlapping the <a>.

http://jsfiddle.net/523ve/4/

So you could fix this by either moving the <a> so that it does not interfere, or by using z-index to re-adjust the stacking order. The latter option may have cross-browser issues but I have not tested. I recommend re-factoring your HTML so that these two elements do not overlap with each other.

---

EDIT 2:

Here is a related SO question, however the accepted answer is incorrect.

What has bigger priority: opacity or z-index in browsers?