固定侧边栏的交互必须依赖javascript，因为position: fixed仅定义定位，不响应点击、不维护状态；css的:hover和@media无法持久保存收缩状态；需js切换sidebar-collapsed等class来控制伸缩，并同步更新z-index、margin-left及css变量以确保布局正确。
固定侧边栏的交互不能靠纯 CSS 实现伸缩或状态切换，position: fixed 本身不响应点击，必须配合 JavaScript 控制 class 切换。
为什么 position: fixed 无法单独支持交互
position: fixed 只是定位行为，它不记录用户操作、不维护状态、也不触发宽度/可见性变化。CSS 的 :hover 或媒体查询 @media 都无法持久保存“已点击收缩”这类状态——页面刷新后一切重置。
-
:hover只在鼠标悬停时生效，松开即恢复 -
@media只响应屏幕尺寸，不响应按钮点击 - 没有 JS 的话，无法监听
click事件并切换is-collapsed这类 class
必须用 JS 控制的两个关键 class
典型伸缩逻辑依赖两个 class：一个控制固定定位和初始宽度，另一个控制收缩后的窄态。CSS 只负责定义样式，JS 负责开关。
- 基础固定类：
.sidebar-fixed包含position: fixed; top: 0; left: 0; height: 100vh; - 收缩类：
.sidebar-collapsed设置width: 60px;并隐藏文字（如overflow: hidden;+text-indent: -9999px;） - JS 示例：
document.querySelector('.toggle-btn').addEventListener('click', () => { sidebar.classList.toggle('sidebar-collapsed'); });
容易被忽略的 z-index 和层叠上下文问题
固定侧边栏默认渲染在普通内容之上，但若主内容区用了 position: relative 且设了 z-index: 1，就可能压住侧边栏——这不是 bug，而是层叠上下文创建导致的。
- 给侧边栏显式加
z-index: 1000（而非999），避免被第三方组件覆盖 - 避免在主内容容器上无意义地加
position: relative+z-index，否则会意外创建新层叠上下文 - 移动端 Safari 中，
position: fixed元素偶尔闪烁，可加transform: translateZ(0)强制硬件加速
真正复杂的不是定位本身，而是状态同步：比如侧边栏收缩后，主内容区的 margin-left 必须实时匹配其当前宽度；如果用 CSS 自定义属性（--sidebar-width）驱动 margin，就得确保 JS 同步更新该变量——漏掉一步，布局就错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
