用 position: fixed 时内容被导航栏盖住，是因为 fixed 元素完全脱离文档流，后续内容自然上移至视口顶部填补空位；必须为首个内容块设置 ≥ 导航栏高度的 margin-top 或 padding-top 来主动避让。
直接用 position: fixed 最稳，但必须同步处理内容遮挡；现代项目优先选 position: sticky，它不脱离文档流、无需手动留白，但父容器稍有不慎就失效。
用 position: fixed 时，为什么内容被导航栏盖住了？
因为 fixed 让元素完全脱离文档流，后续内容会“顶上来”填补空位。这不是 bug，是预期行为。
- 必须给紧随其后的第一个内容块（比如
<main>或<div class="container">）加margin-top或padding-top，值 ≥ 导航栏实际高度（常见 56px–72px） - 如果导航栏高度响应式变化（比如移动端缩为 48px），
margin-top也要配合媒体查询调整 - 避免在
<body>上直接设padding-top：某些 JS 库或框架会动态修改body样式，容易冲突 -
z-index至少设为1000，否则可能被模态框、下拉菜单等覆盖
position: sticky 为什么加了没反应？
它不是“一加就粘”，而是依赖父容器的渲染上下文，常见失效点比想象中多。
- 父元素不能有
overflow: hidden、overflow: auto或overflow: scroll—— 这是最常踩的坑 - 父元素也不能有
transform、filter、opacity < 1，这些会创建新的层叠上下文，切断 sticky 的锚定能力 -
top值必须明确（如top: 0），不能是百分比或auto - 确保导航栏本身在文档流中自然排列，不要被
float、display: inline或position: absolute干扰
Bootstrap 的 fixed-top 类为啥在 iOS Safari 上闪动？
不是类本身的问题，而是 viewport 或布局约束被破坏导致定位参考系错乱。
立即学习“前端免费学习笔记（深入）”；
- 确认
<head>里有标准 viewport meta：<meta name="viewport" content="width=device-width, initial-scale=1"> - 检查
<body>或最外层容器是否意外设置了overflow-x: hidden或固定宽度（如width: 100vw） - 避免在
<nav>内部元素上使用position: relative—— 它会干扰fixed-top的定位根节点 - 如果用了自定义高度（如
style="height: 64px"），对应的内容边距必须手动匹配，pt-5可能不够
滚动一段距离后再固定，能纯 CSS 实现吗？
不能。CSS 没有“滚动阈值”触发机制，sticky-top 是滚动到自身顶部才生效，不是页面滚动了多少像素才生效。
- 真要实现“滚动 200px 后固定”，必须用 JavaScript 监听
scroll事件，动态切换fixed-top或添加自定义 class - 切换时注意：加
fixed同时要给body加padding-top；移除时必须同步清除，否则回滚后内容仍被压住 - 别用
scrollTop频繁读取 —— 触发重排，建议节流或用IntersectionObserver替代（兼容性需查）
真正麻烦的不是写那几行 CSS，而是判断当前场景该用哪个方案：始终固定？滚动触达才固定？要不要支持 IE？有没有第三方 UI 框架在背后改样式？这些决定了你第一行代码写 fixed 还是 sticky，而不是先写完再调。
