加了 sticky-top 不生效是因为 position: sticky 是条件触发器，需满足可滚动祖先容器、正确 DOM 顺序、足够高度及兼容前缀等条件，缺一不可。
为什么加了 sticky-top 还不 sticky
不是类名写错，而是 sticky 的触发条件没满足。它依赖「最近的可滚动祖先容器」提供滚动轴，而 bootstrap 的常见布局（比如 .container 或 .row）默认没有滚动上下文。
- 如果父容器是
<div class="container">，且内容没溢出，sticky-top就不会生效——它不会“强行固定”，只是“滚动到边界时吸附” -
.table-responsive只设了overflow-x: auto，没设max-height或height，垂直方向无滚动，sticky不触发 - Flex 容器（如
d-flex flex-column）若未显式设overflow-y: auto，其子项的position: sticky会静默失效 - Safari 15.4 之前对
position: sticky支持不稳定，尤其在<thead>或<tr>上，建议直接作用于<th>并加-webkit-sticky
sticky-top 和 sticky-bottom 的行为差异
两者都靠 position: sticky 实现，但锚点方向不同，且对 DOM 位置敏感：
-
sticky-top要求元素是其父容器的**第一个子元素**（或前面没有其他非空内容），否则可能被顶起、吸附偏移 -
sticky-bottom要求元素是其父容器的**最后一个子元素**，且父容器必须有明确高度（如min-vh-100）和可滚动区域，否则退化为普通定位 -
sticky-bottom不是“永远贴浏览器底边”，而是“贴住其最近的、有滚动行为的祖先容器的底边”——这点常被误读 - Bootstrap 5.3+ 的
sticky-bottom类本质是position: sticky; bottom: 0，不等价于fixed-bottom，也不脱离文档流
在表格中让 <th> 固定表头的实际写法
不用 JS、不改结构，纯 CSS + Bootstrap 配合即可，但必须闭环所有约束条件：
- 给每个
<th>单独加样式：style="position: -webkit-sticky; position: sticky; top: 0; background: #fff; z-index: 10;" -
<table>必须包在带max-height和overflow-y: auto的容器里，例如：<div class="table-responsive" style="max-height: 400px; overflow-y: auto;"> - 避免给
<tr>加sticky：某些 Bootstrap 版本中<thead>被 flex 包裹，会导致sticky失效 - IE 和旧 Edge（≤18）完全不支持
position: sticky，Bootstrap 5 已放弃 IE 支持，无需降级处理
sticky 在 Flex/Grid 容器里失效的根本原因
不是 Bootstrap 的 bug，是 CSS 规范限制：sticky 定位需要「滚动容器」，而 Flex/Grid 容器默认不创建新的块格式化上下文（BFC）或滚动上下文，除非显式设置 overflow。
- 给 Flex 容器加
overflow-y: auto后，其子项的sticky-top才可能生效；但若容器本身高度不足，仍不滚动，sticky 也不触发 - Grid 布局同理，
grid-template-rows: 1fr auto配合overflow-y: auto在主区域才有效 - 绝对定位（
position: absolute）可以绕过 sticky 限制，但会脱离文档流，需手动管理层级和尺寸 - 若目标是“导航栏下方挂载浮动按钮”，推荐用
position: absolute+top: 100%相对于sticky-top导航栏定位，比强行 hack sticky 更可靠
position: sticky 是个“条件触发器”，不是“开关”。它需要滚动容器、正确 DOM 顺序、兼容前缀、以及足够高的父容器高度——少一个，就静默失败。 
