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