如何在滚动表标题后面放置一个很棒的字体图标？

Question

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

Answer 1

我在 thead 和 th 元素上设置了 z-index，我发现 thead 滑过 fontawesome 图标的顶部。