[英]How to position a font-awesome icon behind a scrolling table header?
我有下表:
<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
我在 thead 和 th 元素上设置了 z-index,我发现 thead 滑过 fontawesome 图标的顶部。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.