最稳的主体避让方式是给body加padding-top并配合scroll-margin-top和flex布局；需设box-sizing: border-box和min-height: 100vh兜底，避免锚点遮挡与布局错乱。
body加padding-top是最稳的主体避让方式
导航用position: fixed后，主体内容会直接顶到页面顶部，被遮住。最直接有效的避让方法，就是在body上加padding-top，值等于导航栏高度（比如60px）。
别用margin-top——它会让body自身位移，可能触发滚动条异常或影响锚点跳转；也别只给main加margin，一旦页面结构变复杂（比如插入section或header），就容易漏掉。
-
body { padding-top: 60px; box-sizing: border-box; }是推荐写法，box-sizing确保 padding 不额外撑大高度 - 如果导航高度是动态的（JS切换主题/多尺寸适配），硬编码
60px会失效，此时应配合 CSS 自定义属性：body { padding-top: var(--navbar-height, 60px); } - 移动端需注意：iOS Safari 在 viewport 缩放后，
padding-top可能计算不准，建议同时设min-height: 100vh兜底
锚点跳转时顶部内容被遮住怎么办
点击#about这类 ID 锚点后，浏览器默认把目标元素顶到视口顶部，但固定导航会把它盖住。这不是 bug，是预期行为——只是没预留视觉偏移。
解决方式是用 CSS 的scroll-margin-top，告诉浏览器“这个元素真正可见的顶部，要从它的上边缘再往上退多少”。
- 给所有锚点目标加：
h2[id], section[id] { scroll-margin-top: 60px; } - 值必须和导航栏高度一致，否则偏移不准；若导航在不同断点下高度不同（如移动端缩为 50px），可用媒体查询覆盖：
@media (max-width: 768px) { h2[id] { scroll-margin-top: 50px; } } - 不支持
scroll-margin-top的老浏览器（IE、旧版 Android WebView）需降级用 JS 滚动补偿，但 2026 年已基本可忽略
顶部+底部都fixed时正文区域怎么留空
当在顶、在底都用了position: fixed，正文不能只靠padding-top——底部也会压住最后一段文字。
正确做法是上下 padding 同时设，且确保正文容器能撑满中间剩余空间。
body { padding-top: 60px; padding-bottom: 40px; min-height: 100vh; }- 正文容器（如
main）无需额外 margin，但要确认没有overflow: hidden或transform干扰其渲染高度 - 如果底部栏高度不固定（例如含动态通知徽标），
padding-bottom硬编码就会出问题，此时应改用 flex 布局隔离底部栏，而非 fixed ——也就是说，“底部固定”本身可能就是个误需求
为什么flex布局比float更适合固定导航内部结构
老方案用float: left排菜单项，现在几乎没理由继续用：它依赖清除浮动、易塌陷、响应式换行不可控，而且和position: fixed组合时，父容器高度常为 0，导致 z-index 失效或阴影错位。
现代写法直接用display: flex，对齐、等分、换行全由 CSS 控制，不依赖文档流位置。
-
.nav-list { display: flex; gap: 1rem; align-items: center; }比float更干净 - 下拉菜单的
.dropdown需设position: relative，其子菜单用position: absolute，否则会相对视口定位飘走 - 别在 flex 容器里混用
float或inline-block，这会破坏主轴对齐逻辑，尤其在 Safari 中表现不稳定
实际布局冲突往往不出在“怎么固定”，而出在“固定之后谁来负责腾地方”。padding-top + scroll-margin-top + flex 内部结构，这三者配合到位，比反复调试z-index或重写 JS 滚动监听更省事。细节上最容易被跳过的，是box-sizing: border-box和min-height: 100vh这两处兜底声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
