表格勾选复选框后，tbody行覆盖thead底部box-shadow问题

我之前在Chrome里也碰到过一模一样的表格渲染问题！你这个情况是因为thead没有明确的层叠层级设置，当勾选复选框后悬停表格行时，tbody的行会创建更高优先级的层叠上下文，直接把thead的阴影给挡住了。试试下面的修复方案：

1. 提升thead的层叠优先级 #

给thead加上这几行CSS就行，让它的层级比tbody的行高：

thead {
  position: relative;
  z-index: 1;
}

这样thead的阴影就会始终显示在表格行的上方，不会被悬停的行覆盖了。

2. 确认tbody行的样式不会干扰 #

虽然你已经设置了background-color: transparent，但可以额外确保悬停的行没有设置过高的z-index，避免冲突：

tbody tr:hover {
  z-index: 0; /* 确保行的层级低于thead */
}

为啥会出现这个问题？ #

Chrome对表格元素的渲染逻辑比较特殊，当tbody的行处于交互状态（比如悬停、被选中）时，会自动创建新的层叠上下文。如果thead没有设置相对定位和z-index，它的层级就会低于这些行，阴影自然就被挡住了。这个问题在Firefox或者Edge里一般不会出现，是Chrome独有的小坑。

另外，你用的是Bootstrap 3.3.7，这个修改完全不会破坏原有框架的表格样式，放心用就行。

问题效果参考：

内容的提问来源于stack exchange，提问作者FllnAngl