如何调整CSS布局层级，确保头部固定内容不被遮挡？

在现代前端布局中，固定头部是常见需求。但它往往导致页面内容被遮挡、滚动体验异常或层级冲突。下面把这些痛点拆解成易懂的步骤，方便你定位并处理问题。其实，

1️⃣ 常见痛点回顾

使用者在实现固定头部时最频繁遇到的困扰：

• 页面内容直接从顶部开始渲染。导致被头部遮挡，
• 使用 margin-top 而不是 padding-top出现外边距合并或空白。
• z-index 设置不当，导致滚动区域被头部阻塞。
• 头部高度随内容变化，但未同步更新页面内边距。其实，
• 使用 JavaScript 动态获取高度时忘记更新对应 CSS。

2️⃣ 先让内容留出空间： /.wrapper 的 padding-top

关键点：不要用 margin‑top；不过，用 padding‑top 可以避免外边距折叠，还能兼容滚动条。推荐使用 CSS 变量统一管理高度。