Bootstrap 5 开发中禁用按钮覆盖粘性表头，激活按钮无此问题

问题原因 #

该问题是堆叠上下文优先级冲突导致：你当前设置了sticky定位的表头未显式指定z-index属性，而Bootstrap 5中带.disabled类的按钮默认堆叠优先级高于未设置z-index的sticky元素，所以滚动时禁用按钮会穿透表头显示。正常状态的按钮堆叠优先级符合预期，因此不会出现该问题。

解决方法 #

不需要调整按钮的禁用属性设置，仅修改表头的样式规则即可：

1. 无需同时给表头的tr和th都设置sticky定位，仅保留th的定位设置即可
2. 给所有吸顶的th添加z-index: 10（数值可根据实际场景调整，只要高于表格内其他元素的z-index即可）

修改后的表头代码示例：

<thead>
  <tr>
    <th scope="col" style="position: sticky; top: 0; background-color: white; z-index: 10;">Date</th>
    <th scope="col" style="position: sticky; top: 0; background-color: white; z-index: 10;">Agenda</th>
    <th scope="col" style="position: sticky; top: 0; background-color: white; z-index: 10;">Meeting Minutes</th>
  </tr>
</thead>

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