sticky支持bottom但需满足条件：父容器须有明确高度和overflow-y:auto，bottom值应等于元素自身高度而非0，iOS Safari 15.3及更早版本会忽略bottom声明，Chrome、Firefox及Safari 15.4+才稳定支持。
sticky 的 bottom 属性不是不支持，而是被浏览器忽略或静默退化
sticky 支持 bottom，但实际能否生效取决于浏览器实现和上下文环境。iOS Safari 15.3 及更早版本会直接忽略 bottom: 0 声明，把元素当 position: relative 处理——这不是语法错误，是引擎限制。Chrome、Firefox 和 iOS Safari 15.4+ 才真正稳定支持 bottom，但前提是父容器满足全部粘性条件。
父容器没滚动上下文，bottom 就没锚点可算
bottom 的值是相对于“最近的可滚动祖先容器底边”的偏移量。如果父容器没设 height 或 max-height，也没加 overflow-y: auto，浏览器根本找不到“底边在哪”，bottom 就不会参与计算。
- 常见失效结构：
<div><nav style="position: sticky; bottom: 0"></nav></div>，外层div没高度、没溢出，nav直接退化为static - 必须显式设置父容器：
max-height: 70vh; overflow-y: auto（不能是hidden或clip） - 若用 Flex 布局，需确保主轴方向可滚动：比如
flex-direction: column+overflow-y: auto
bottom: 0 在多数场景下反而导致“到边就消失”
写 bottom: 0 是想让元素贴住容器底部，但 sticky 的触发逻辑是：“当元素底边即将离开容器可视区域下边界时开始固定”。一旦容器高度刚好卡住元素，bottom: 0 会让它在最后一帧被判定为“已完全滚出”，立刻解除粘性——看起来就像闪一下就没了。
- 更稳的做法是测出元素自身高度（如
48px），设bottom: 48px - 或用
bottom: calc(100% - 48px)，但前提是父容器高度确定且子元素不参与撑高 - 真要底部吸附，
margin-top: auto+ Flex 布局推到末尾，再配合position: sticky; top: 100%; transform: translateY(-100%)更可靠
transform、filter、-webkit-overflow-scrolling 会中断 sticky 锚点
哪怕父容器高度和 overflow 都对，只要任意祖先元素用了 transform、filter、backface-visibility: hidden 或旧版 -webkit-overflow-scrolling: touch，sticky 就会被强制降级——DevTools 里看到的 position 计算值会变成 static 或 relative，不是 bug，是规范行为。
- 微信 WebView、部分安卓定制浏览器也会静默退化 sticky
- 真机调试时，务必检查 computed 样式中的
position值是否仍是sticky - 关键导航栏建议 fallback 到
IntersectionObserver+ 手动切fixed类，而不是只靠 CSS
最常被忽略的点是：sticky 的行为边界永远由最近的可滚动祖先决定，不是 viewport，也不是 body；而这个祖先是否“可滚动”，取决于 height + overflow + 内容是否溢出三者同时成立——少一个，bottom 就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
