粘性桌标头结构中的不透明度问题

Question

我创建了提琴供参考： - 小提琴。在此中，我有表结构，我想在页面顶部贴上表标头，因此我使用了translateY()，您可以在 fiddle 上对其进行检查。现在，在第一列上有不透明度的复选框：0.3 。

现在，当我滚动表和任何复选框时， tbody 的任何复选框与 thead 的复选框重叠，然后我无法检查thead复选框。

我还创建了问题的视频： - 视频。如果有不透明度少于一个，然后尝试重叠复选框，则将不会选择thead复选框。如果我使用不透明度：1 它工作正常。即使我将 Z-INDEX 放到标题的复选框中，它也无法正常工作。注意： - 我无法删除或更改输入不透明度

Answer 1

怪异的错误。似乎可以通过将<thead>放置在<tbody>下方的HTML源中来解决。https://jsfiddle.net/euejc4kg/

因此，它与堆叠/订单有关，我认为我可以通过设置Translate3D或The Toby上的任何内容来修复它，但这似乎并没有解决。但这也许是别人可以使用的东西。

另一个选项可能是在复选框顶部使用标签，并且根本没有指针事件。

Answer 2

这是Chrome的（hacky）解决方法...

使用inputs顶部的psuedoelement创建不透明度效果，并设置pointer-events: none。

小提琴

$(this).on('scroll', function() {
  $('table').find('#table_header').css('transform', 'translateY(' + $(this).scrollTop() + 'px)');
});

table {
  position: relative;
}
table:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  
  display: block;
  background: #fff;
  opacity: .7;
  width: 20px;
  pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead id='table_header'>
    <tr>
      <th>
        <div>
          <input type="checkbox" name="">
        </div>
      </th>
      <th>a</th>
      <th>b</th>
      <th>c</th>
      <th>d</th>
      <th>e</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
  </tbody>
</table>