JSFiddle - React, Tailwind, and code Playground

by Nicholas Hazel

HTML

<b>Situation:</b>
<ul>
    <li><code>border-collapse</code>d <code>&lt;table&gt;</code> with 0px <code>padding</code> on <code>&lt;td&gt;</code>s (this is the situation the "bug"(?) presented itself in, so is the testcase I am using)</li>
    <li><code>&lt;a&gt;</code> using <code>position:absolute</code> and <code>background-image</code></li>
    
<br><br>

<table>
    <tr>
        <td>
            <a href="#"></a>
        </td>
    </tr>
    <tr>
        <td>
            <div>The <code>&lt;a&gt;</code> above has no opacity set. Its last pixel sits below the shadow, which (correctly?) renders over the top.</div>
        </td>
    </tr>
</table>

<br><br>
    
<table>
    <tr>
        <td>
            <a id="opaque" href="#"></a>
        </td>
    </tr>
    <tr>
        <td>
            <div>The <code>&lt;a&gt;</code> above is identical to the first but has an opacity of "0.99", and it now no longer sits underneath this <code>&lt;div&gt;</code> (which is in another <code>tr&#x25B6;td!</code>).</div>
        </td>
    </tr>
</table>

CSS

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

a {
    background-image: url("http://ibin.co/19rwR69EOigr");
    height: 100px;
    width: 120px;
    display: block;
    margin: 0 auto;
}

div {
    width: 200px;
    padding: 20px;
    box-shadow: #000 0px 0px 13px;   
}

table {
    text-align: center;
    border-spacing: 0;
    border-collapse: collapse
}

table td {
    padding: 0;
}

html, body, table {
    margin: 0 auto;
    margin: 15px;
}