使用position:fixed可实现头部固定，通过设置top:0和width:100%使header始终位于视窗顶部，同时为main内容区添加等高margin-top避免被遮挡，结合z-index确保层级优先，适用于导航栏布局。
要实现头部固定的内容布局，核心是让页面的头部（header）在用户滚动时始终保持在视窗顶部，而下方内容可以正常滚动。这可以通过 CSS 的 position: fixed 属性轻松实现。
1. 使用 position: fixed 固定头部
将头部元素设置为固定定位，使其脱离文档流并始终停留在浏览器窗口的指定位置。
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
z-index: 1000; /* 确保头部在其他内容之上 */
}
这样，无论页面如何滚动，header 都会停留在顶部。
2. 为内容区域预留空间
由于 fixed 元素脱离了文档流，下面的内容会“上移”，可能被头部遮挡。因此需要给内容区域添加上边距，等于头部的高度。
立即学习“前端免费学习笔记（深入）”；
main {
margin-top: 60px; /* 与 header 的高度一致 */
padding: 20px;
}
这样可以确保内容从头部下方开始显示，避免被覆盖。
3. 完整示例结构
结合 HTML 结构，效果更清晰：
这里是固定头部 这里是滚动内容...
配合上面的 CSS，就能实现常见的固定导航布局，适用于后台管理、移动端页面或网站导航栏。
4. 注意事项
- fixed 定位会让元素相对于视窗固定，注意检查是否影响其他布局元素
- 使用 z-index 确保头部在最上层
- 在移动设备上测试，避免出现安全区域（如刘海屏）遮挡问题，必要时可结合 env() 函数留出间距
- 若需支持老版本浏览器，注意兼容性
基本上就这些，不复杂但容易忽略 margin 和 z-index 的设置。
