直接给<header>加position: fixed必须配合top或bottom（如top: 0）才能生效，否则因脱离文档流且坐标默认auto而不可见；需设置z-index、预留main顶部间距，并注意父元素transform等触发层叠上下文的陷阱。
header 固定定位的正确写法
直接给 <header> 加 position: fixed 是可行的，但必须配合 top（或 bottom）才能生效，否则它会“消失”在视口左上角外（因为默认 top: auto + fixed 会导致位置不可见）。
为什么加了 fixed 却没固定住？
常见错误是只写：header { position: fixed; }，漏掉定位偏移。fixed 元素脱离文档流后，若不指定 top/left 等，其坐标默认为 auto，浏览器无法计算渲染位置，实际表现常为“看不见”或“叠在顶部内容下方”。
- 必须显式设置
top: 0（顶部吸附）或bottom: 0（底部吸附） - 如果 header 有 padding/margin，固定后可能遮挡下方内容——需给
<main>或第一个兄弟元素加等高margin-top或padding-top - 移动端要注意
viewport设置，部分 iOS Safari 在滚动时可能触发 fixed 重绘异常，可加transform: translateZ(0)强制硬件加速（非必需，但能缓解闪动）
兼容性与 z-index 注意点
position: fixed 在所有现代浏览器中支持良好，但 Android 4.3 及更早版本对 fixed 支持不完整（表现为随页面滚动）。若需兼容老安卓，得降级用 position: sticky（仅对父容器内滚动有效）或 JS 模拟。
-
z-index必须设为正数（如z-index: 100），否则可能被后续内容覆盖 - 父元素若设置了
transform、perspective或filter，会创建新的层叠上下文，导致fixed元素相对于该父容器定位，而非视口——这是最隐蔽的坑 - 避免在
<header>上同时用will-change: transform和fixed，某些 Chrome 版本会出现渲染错位
一个最小可用示例
以下代码可直接复制验证：
立即学习“前端免费学习笔记（深入）”；
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
z-index: 100;
}
main {
margin-top: 60px; /* 假设 header 高 60px，预留空间 */
}注意：如果 <header> 内部有 flex 布局或高度不确定，margin-top 最好用 JS 动态读取 header.offsetHeight 设置，否则响应式断点切换时容易露底。
