使用 position: fixed 可将元素固定在页面右侧。1. 设置 position: fixed、top: 0、right: 0，定义宽度和高度；2. 主内容区添加 margin-right 避免被遮挡；3. 响应式下可隐藏或调整；4. 配合 HTML 结构实现右侧导航栏。
当需要将一个元素固定在页面的右侧，比如一个不随页面滚动的导航栏，可以使用 position: fixed 结合 right 属性来实现。这样可以让元素相对于浏览器视口固定位置，不会随着页面滚动而移动。
1. 基本CSS设置
给目标元素设置以下样式：
.fixed-right {
position: fixed;
top: 0;
right: 0;
width: 200px;
height: 100%;
background-color: #f4f4f4;
box-shadow: -2px 0 5px rgba(0,0,0,0.1);
}
- position: fixed：让元素脱离文档流，相对于视口固定定位。
- top: 0：从视口顶部开始对齐。
- right: 0：紧贴浏览器窗口的右侧。
- width 和 height：定义固定栏的尺寸，可根据需要调整。
2. 避免遮挡内容
由于 fixed 元素会覆盖其他内容，建议在主体内容区域添加右边距，防止被遮挡：
.content {
margin-right: 200px; /* 与固定栏宽度一致 */
}
- 如果右侧栏宽度是 200px，主内容区应留出相应空间。
- 也可使用 padding-right 替代 margin。
3. 响应式处理（可选）
在小屏幕上，可隐藏或调整固定栏：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) {
.fixed-right {
display: none; /* 小屏隐藏 */
}
.content {
margin-right: 0;
}
}
4. HTML结构示例
<div class="fixed-right">
<!-- 右侧导航内容 -->
<ul>
<li><a href="#section1">章节1</a></li>
<li><a href="#section2">章节2</a></li>
</ul>
</div>
<p><div class="content">
<h2 id="section1">章节1</h2>
<p>很长的内容...</p>
<h2 id="section2">章节2</h2>
<p>更多内容...</p>
</div></p>基本上就这些。只要正确使用 position: fixed 和 right，再处理好布局冲突，就能实现稳定的右侧固定导航栏。
