position: fixed 元素需显式设置 top/bottom（至少一个）并注意父容器 transform/perspective/filter 会使其退化为 absolute；移动端 Safari 存在兼容性问题；遮挡内容需用 padding-top 补齐，局部固定推荐 sticky；固定区域滚动应使用 max-height + overflow-y: auto 和 100dvh。

用 position: fixed 锁定元素，但别只写这一行

直接加 position: fixed 往往不生效，或一滚动就错位。核心原因是：它脱离文档流后，定位基准是视口（viewport），不是父容器——所以 top/left 值得从屏幕左上角算起，而不是从它原本的位置。

• 必须显式设置 top 或 bottom（至少一个），否则元素会塌缩到 0,0 位置
• 如果父容器有 transform、perspective 或 filter，会创建新的 containing block，fixed 就失效，退化成 absolute
• 移动端 Safari 对 fixed 支持不稳定，页面缩放或键盘弹出时容易跳动
• 示例：

  <div class="header">...</div>

  对应 CSS：

  .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; }

滚动时遮挡内容？用 padding-top 补齐固定区域高度

固定头部后，下面的内容会“顶上来”，被盖住。这不是 bug，是 fixed 元素不占空间的必然结果。

• 在紧接其后的兄弟元素（比如 main）上加 padding-top，值等于固定元素的高度
• 别用 margin-top，它可能被外边距合并吃掉
• 高度动态变化时（比如响应式导航栏），用 JS 监听并更新 padding-top，或改用 CSS 自定义属性 + calc()
• 示例：

  :root { --header-height: 64px; } .main { padding-top: var(--header-height); }

需要局部固定（比如表格某列）？position: sticky 更合适

sticky 是“相对定位”和“固定定位”的混合体：在滚动到阈值前按正常流排布，过了就卡住。它不脱离文档流，不影响其他元素布局。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 必须配合 top、bottom、left 或 right 才生效，单独写 sticky 没用
• 祖先元素不能有 overflow: hidden|auto|scroll，否则粘性失效
• 兼容性注意：IE 完全不支持；iOS Safari 15.4 之前对 sticky 在 table 内的行为有 bug
• 表格列固定示例：

  th:first-child, td:first-child { position: sticky; left: 0; background: white; }

固定区域内部要滚动？避免用 overflow: auto 破坏 fixed 行为

给 fixed 元素加 overflow: auto 本身没问题，但常见错误是：子元素高度超了，却忘了设 max-height，导致整个元素撑高、溢出视口。

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

• fixed 元素的宽高必须可控，推荐用 max-height + overflow-y: auto 组合
• 不要依赖 height: 100vh，因为移动端地址栏显示/隐藏会改变 vh 值，造成抖动
• 更稳的写法是用 height: 100dvh（dvh 是动态视口单位，已广泛支持）
• 示例：

  .sidebar { position: fixed; top: 0; right: 0; width: 300px; height: 100dvh; overflow-y: auto; }

固定这事看着简单，真正卡住人的往往是父容器的 transform、滚动容器的 overflow、或者移动端那个飘忽的 vh 单位。动手前先 inspect 一下祖先链，比反复调 top 值有用得多。