使用position: fixed可创建固定头部和侧边栏，提升导航便捷性。1. 头部设top:0、width:100%并用margin-top避免内容遮挡；2. 侧边栏设left:0、height:100vh，主内容通过margin-left腾出空间；3. 同时固定两者时，侧边栏top等于头部高度，height用calc(100vh-60px)扣除头部占用区域；4. 注意z-index层级管理及移动端兼容性问题。
在网页设计中，固定头部和侧边栏能提升用户体验，让用户在滚动页面时仍可快速访问导航。css中的 position: fixed 是实现这类效果的核心方法。下面介绍如何使用 fixed 定位来创建固定的头部和侧边栏，并注意常见问题与技巧。
固定头部：始终保持在顶部
将导航栏或页头设置为固定定位后，它会在用户滚动页面时停留在浏览器窗口的顶部。
示例代码：
.header { position: fixed; top: 0; left: 0; width: 100%; height: 60px; background-color: #333; color: white; z-index: 1000; } .content { margin-top: 60px; /* 避免内容被头部遮挡 */ }
说明： 设置 top: 0 让元素贴住视口顶部，width: 100% 撑满屏幕宽度。z-index 确保头部显示在其他内容之上。同时，主体内容需添加 margin-top，防止被遮挡。
立即学习“前端免费学习笔记（深入）”；
固定侧边栏：始终靠在一侧
侧边栏常用于展示菜单、目录或工具链接，使用 fixed 可使其在滚动时保持可见。
.sidebar { position: fixed; top: 0; left: 0; width: 200px; height: 100vh; background-color: #f4f4f4; border-right: 1px solid #ddd; z-index: 900; } .main-content { margin-left: 200px; /* 为主内容留出侧边栏空间 */ }
说明： height: 100vh 让侧边栏占满视口高度，left: 0 固定在左侧。主内容通过 margin-left 避开侧边栏区域，防止被覆盖。
组合使用：固定头部 + 固定侧边栏
当同时固定头部和侧边栏时，需注意层级和布局空间分配。
.header { position: fixed; top: 0; left: 0; width: 100%; height: 60px; z-index: 1000; background: #333; } .sidebar { position: fixed; top: 60px; /* 紧接头部下方开始 */ left: 0; width: 200px; height: calc(100vh - 60px); /* 扣除头部高度 */ background: #f4f4f4; z-index: 900; } .main-content { margin-left: 200px; margin-top: 60px; }
关键点： 侧边栏的 top 应等于头部高度，避免重叠。使用 calc() 动态计算可用高度，确保布局完整。
注意事项与技巧
使用 fixed 定位时，有几个容易忽略的问题：
- fixed 元素脱离文档流，可能遮挡内容，记得给其他元素加 margin 或 padding 留出空间
- 在移动设备上测试，fixed 定位有时在部分浏览器中表现异常（如 safari 的输入框触发缩放）
- 合理使用 z-index，避免层级混乱
- 若页面有多个 fixed 元素，建议统一管理 z-index 数值（如头部 1000，侧边栏 900，弹窗 1100）
基本上就这些。掌握 fixed 定位的关键是理解它相对于视口固定，以及如何协调与其他元素的空间关系。不复杂但容易忽略细节。