css - 粘性表头结构中的不透明度问题

Question

我创建了 fiddle 以供引用:- FIDDLE .在这里我有表格结构，我想把表格标题放在页面顶部，所以我使用了 translateY() 你可以在 FIDDLE 上检查它。现在在第一列有一个复选框，opacity: 0.3。

现在，当我滚动表格并且 tbody 的任何复选框与 thead 的复选框重叠时，我无法选中 thead 复选框。

我还创建了问题视频:- VIDEO .如果 opacity 小于 1，然后如果您尝试重叠复选框，则不会选中 thead 复选框。如果我使用 opacity:1 它工作正常。即使我将 z-index 提供给 header 的复选框，它也不起作用。 注意:-我无法删除或更改输入不透明度

Answer 1

奇怪的错误。似乎可以通过放置 <thead> 来解决下面<tbody>在 html 源代码中。 https://jsfiddle.net/euejc4kg/

所以它与堆叠/顺序有关，我想我可以通过在 tbody 上设置 translate3d 或任何东西来修复它，但似乎并没有修复它。但也许这是其他人可以使用的东西。

另一种选择可能是在复选框顶部使用标签，并且根本不在复选框上使用指针事件。