使用position: fixed实现侧边栏固定，通过设置top、left和宽高使其定位在视窗左侧，主内容区用margin-left留出空间避免遮挡，配合overflow-y和z-index优化体验，响应式场景可结合媒体查询调整。
实现固定侧边栏的关键是使用 CSS 的 position: fixed 属性，让侧边栏在页面滚动时始终保持在视窗的某个位置。下面是一个简单实用的方法。
1. 基本结构
先写一个基本的 HTML 结构：
2. 设置固定定位
给侧边栏设置 position: fixed，并指定位置：
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 250px;
height: 100vh;
background-color: #f4f4f4;
padding: 20px;
}
这样侧边栏会固定在左侧，随页面滚动而保持不动。
3. 调整主内容区域
主内容区需要避开侧边栏占据的空间，避免被遮挡：
.main-content {
margin-left: 270px;
padding: 20px;
}
margin-left 的值略大于侧边栏宽度，留出一点间距。
4. 可选优化
提升体验的小技巧：- 给侧边栏加 overflow-y: auto，内容过多时内部可滚动
- 使用 z-index 确保侧边栏在其他元素之上
- 在小屏幕中可用媒体查询隐藏或改为响应式抽屉式菜单
基本上就这些。核心就是 fixed 定位 + 主内容留白，简单有效。不复杂但容易忽略细节。
