如何固定侧边栏不随页面的上下移动而移动？

可以使用 CSS 的 position 属性将侧边栏固定在页面的一侧，具体方法如下：

1. 在 HTML 中定义侧边栏的结构，可以使用 div 元素来包裹侧边栏内容。

2. 在 CSS 中为侧边栏定义样式，包括宽度、高度、背景色、字体等。

3. 使用 position 属性将侧边栏固定在页面的一侧，可以设置为 fixed、absolute 或 sticky，具体取决于设计需求。

4. 使用 top、bottom、left、right 属性来确定侧边栏的位置，可以根据页面的设计需求自行调整。

以下是一个简单的示例代码：

HTML：

<div class="sidebar">
    <ul>
        <li>菜单项 1</li>
        <li>菜单项 2</li>
        <li>菜单项 3</li>
    </ul>
</div>

CSS：

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 100%;
    background-color: #f1f1f1;
    font-size: 16px;
}

.sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar li {
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.sidebar li:last-child {
    border-bottom: none;
}

以上代码将侧边栏固定在页面的左侧，宽度为 200px，高度为页面的高度，背景色为 #f1f1f1，菜单项使用无序列表展示。可以根据实际需求进行调整。