用 position: fixed 实现固定头部需设置 top: 0、width: 100%、背景色和 z-index，并为 body 或主内容添加等高 padding-top/margin-top 避免遮挡；注意响应式适配与父容器 transform 等导致 fixed 失效的问题。
用 position: fixed 做固定头部是最直接、最常用的方法，关键在于理解它的定位基准和对布局的影响。
固定头部的基本写法
给头部元素设置 position: fixed，并指定 top: 0 和 left: 0（或 right: 0），就能让它“钉”在视口顶部。同时必须设置宽度（如 width: 100%）和背景色，否则可能看不见或内容错位。
position: fixed;top: 0;left: 0;width: 100%;-
z-index: 1000;（确保它盖在其他内容上面）
避免正文被遮挡
fixed 元素会脱离文档流，导致后面的内容“顶上来”，盖住头部。解决方法是给 或主内容区域加一个等于头部高度的 padding-top 或 margin-top。
- 如果头部高 60px，就在
body上写：padding-top: 60px; - 或者给主要内容容器（比如
.main）加：margin-top: 60px; - 注意：这个值要和头部实际高度一致，建议用 CSS 变量或注释标清楚
适配不同屏幕与滚动表现
固定头部在小屏上容易挤占空间，建议配合响应式处理：
立即学习“前端免费学习笔记（深入）”；
- 用
box-sizing: border-box确保 padding 不影响宽度计算 - 文字大小、内边距在移动端适当减小（用
@media） - 避免在 fixed 元素里放过于复杂的交互（如下拉菜单），防止移动端点击异常
- 测试滚动时是否“卡顿”——尽量避免在 fixed 元素中频繁触发重排（例如动态改 height 或 font-size）
常见坑与提醒
初学者容易忽略这些细节：
- 没设
z-index，结果被轮播图、弹窗等挡住 - 忘了加
background-color，滚动时看到下面内容透上来 - 用
height设置头部高度，但内容超出后溢出不可见；推荐用min-height或靠内边距撑开 - 父容器有
transform、perspective或filter，会创建新的层叠上下文，导致 fixed 失效（此时它会相对于该父容器定位）
不复杂但容易忽略。写完记得在手机和桌面端都滚动看看效果是否稳定。
