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支持不稳定，页面缩放或键盘弹出时容易跳动 - 示例：
...
对应 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 是“相对定位”和“固定定位”的混合体：在滚动到阈值前按正常流排布，过了就卡住。它不脱离文档流，不影响其他元素布局。
- 必须配合
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 值有用得多。