position: fixed 使头部脱离文档流，导致后续内容从顶部渲染而被遮挡，需用 margin-top 或 padding-top 补偿；其定位相对于视口，不感知父容器边界。

为什么 position: fixed 会让头部脱离文档流，导致内容被遮挡

用 position: fixed 固定头部后，它会完全脱离正常布局流，后续内容会“无视”它的存在，从页面顶部开始渲染，结果就是第一屏内容被盖住。

• 必须手动给主体内容加 margin-top 或 padding-top，值至少等于头部高度
• 如果头部高度不固定（比如响应式字号变化、多行标题），硬写死像素值会出错
• fixed 元素默认相对于视口定位，滚动时无法感知父容器边界（比如只在某个弹窗内滚动）

position: sticky 的触发条件和常见失效原因

sticky 看似理想，但实际中经常“不粘”——不是 bug，是没满足前提条件。

• 父容器不能有 overflow: hidden、overflow: auto 或 overflow: scroll，否则粘性失效
• 必须设置有效的 top（或 bottom）值，例如 top: 0；设成 top: auto 或不设，等于没开 sticky
• 仅对「块级盒」生效，如果父元素是 display: flex 或 display: grid，子项需确保自身是块级（如加 display: block）
• 不支持 IE，Safari 旧版本对 sticky 在 table 或 flex 子项中的行为不稳定

滚动内容区域需要明确高度或溢出控制

无论用 fixed 还是 sticky，如果内容区本身不产生滚动，整个页面还是会全局滚动——这不是头部没固定，而是内容没“让出”滚动空间。

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

• 给内容容器设 height + overflow-y: auto，让它内部滚动（推荐用于弹窗、卡片等局部场景）
• 若要整页滚动，内容区无需设高，但必须确保它不被头部遮挡（fixed 下靠 margin-top；sticky 下靠自然流）
• 避免在内容区父级上误加 overscroll-behavior: contain，它可能抑制滚动传递，导致拉不到底

响应式头部固定要注意的两个细节

移动端折叠菜单、字号缩放、横竖屏切换，都会影响头部高度计算和粘性表现。

立即学习“前端免费学习笔记（深入）”；

• 用 top: env(safe-area-inset-top) 替代固定 top: 0，适配 iPhone 刘海/安卓状态栏
• 慎用 vh 单位设头部高度：iOS Safari 滚动时 100vh 会包含地址栏，造成高度抖动；优先用 px、rem 或 fit-content
• 如果用 JavaScript 动态调整 top 值（比如监听 resize），注意防抖，否则频繁重排影响性能

真正难的不是选 fixed 还是 sticky，而是当它们和 flex 布局、iframe 嵌套、第三方 UI 库（比如 Ant Design 的 Layout.Header）混用时，谁在截断滚动、谁在重置定位上下文——这时候得一层层查 getComputedStyle 和滚动祖先。