Setting opacity on image causes an overlapping element's box-shadow to go away

Question

The following CSS, applied to an <a> and a <div> residing in individual <tr>▶<td> elements in a <table> (with border-collapse and td { padding: 0px; } set), works as expected:

a {
    background-image: url("http://ibin.co/19rwR69EOigr");
    height: 100px;
    width: 120px;
    display: block;
}
div {
    width: 200px;
    box-shadow: #000 0px 0px 13px;
}

If I apply any opacity to the <a>, the browser's internal layering seems to break horribly.

Note that the test picture's last pixel sits within the <div>'s box-shadow, even in the first example. (And it says opacity = ".99", if you can't see it in the image >.>)

Is this possibly a rendering bug that's managed to creep into both Firefox and Chrome? :P

See what opens and shuts in this JSFiddle.

Thanks in advance!

Answer 1

Quite Simple.

Thank you for clean formatting.

Change opaque ID to this:

#opaque {
    opacity: .99;
    z-index:-10;
    position:relative;
}

http://jsfiddle.net/SinisterSystems/GbAYU/3/

---

What is happening is whenever opacity is set, the back-end method of CSS3 to interpret it throws some pretty wild z-index's.

Just set it to stack behind the other elements and all will work fine for you.

position:relative; - Cause otherwise it wouldn't accept your z-index property.

z-index:-10; - So that it places it behind the z-index of 0 of your other objects.

---

EDIT:

The default value of HTML elements does not support static as an object that z-index will apply to, hence the position declaration.

And it totally does with absolute, fixed, relative, or inherit, but not static.