How to position a font-awesome icon behind a scrolling table header?

I have the following table:

<div id="table-container>
    <table>
        <thead>
            <tr>
                <td>
                ...
                </td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <fa-stack>
                        <!-- some stacked icons -->
                    </fa-stack>
                </td>
            </tr>
        </tbody>
        <!-- more tbody items -->
    </table>
</div>

I am using javascript to fixate the table header when scrolling:

document.getElementById('table-container').addEventListener('scroll', function (): void {
    let translate = 'translate(0,' + this.scrollTop + 'px)';
    this.querySelector('thead').style.transform = translate;
});

My problem is, that the stacked font-awesome icons appear before the table header. Trying to hide them behind it using z-index doesn't work.

When I remove the position:absolute/position:relative attributes from the font-awesome classes, the icons disappear behind the header. But then they aren't stacked anymore. Any suggestions?

Here's a codepen that shows the problem: https://codepen.io/ahouben/pen/jaZbvm