使用 position: fixed 可实现头部导航固定在页面顶部，通过设置 header 的 top: 0 和 width: 100% 使其始终显示在视窗上方，结合 z-index 确保层级最高；为防止遮挡内容，需给 main 元素添加 margin-top 留出导航高度，形成完整布局。
在CSS初级项目中，制作一个固定头部导航是常见需求。通过 position 属性与页面布局（layout）的结合，可以轻松实现头部始终停留在页面顶部的效果，即使页面滚动也不会消失。
使用 position: fixed 实现固定头部
将导航栏设置为固定定位，使其脱离文档流并固定在视窗的某个位置，通常用于顶部导航。
关键代码：position: fixed; 让元素相对于浏览器窗口固定位置。配合 top: 0; 可使导航栏始终贴在页面最上方。
- 给 header 或 nav 元素设置固定定位
- 设置宽度为 100%，覆盖整个屏幕顶部
- 添加背景色防止内容从下方透出
示例代码：
立即学习“前端免费学习笔记（深入）”；
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: white;
padding: 10px 20px;
z-index: 1000; /* 确保在其他内容之上 */
}
调整主内容区域避免被遮挡
由于 fixed 元素脱离文档流，后面的页面内容会“上移”，可能被导航栏遮挡。需要给主体内容添加足够的上边距。
- 使用 margin-top 留出空间
- 留白高度应等于导航栏的高度
示例代码：
立即学习“前端免费学习笔记（深入）”；
main {
margin-top: 60px; /* 假设导航栏高60px */
padding: 20px;
}
结合整体 layout 的结构建议
合理的HTML结构有助于样式控制。推荐如下基本布局：
固定导航 页面内容
- header 不占据文档流，但视觉上位于顶部
- main 负责承载可滚动内容
- 确保 z-index 正确，避免其他元素覆盖导航
基本上就这些。用 position: fixed 结合简单的布局调整，就能实现稳定可靠的固定头部效果，适合大多数静态网站或初级项目使用。
