如何在滾動表標題后面放置一個很棒的字體圖標？

Question

我有下表：

<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>

我在滾動時使用 javascript 來固定表格標題：

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

我的問題是，堆疊的字體很棒的圖標出現在表格標題之前。 嘗試使用 z-index 將它們隱藏在其后面是行不通的。

當我從 font-awesome 類中刪除 position:absolute/position:relative 屬性時，圖標消失在標題后面。 但后來它們不再堆疊了。 有什么建議么？

這是一個顯示問題的代碼筆： https ://codepen.io/ahouben/pen/jaZbvm

Answer 1

我在 thead 和 th 元素上設置了 z-index，我發現 thead 滑過 fontawesome 圖標的頂部。