用css定位+逻辑复用一套dom实现响应式侧边导航：大屏用position:fixed+min-height:100vh固定，小屏用position:relative+width:100%回归flex流式；需确保sticky父容器可滚动、避免transform等触发新层叠上下文，并在@media中显式重置top/left/auto及z-index。
大屏侧边导航固定、小屏转到底部，不是靠媒体查询切两套 DOM，而是用 CSS 定位 + 逻辑复用一套结构就能搞定。
position: sticky 在侧边栏上为什么不起作用
常见错误是给 .sidebar 直接加 position: sticky; top: 0;，但没管它的父容器高度或滚动上下文。sticky 只在「父容器有滚动行为且自身未脱离文档流」时才生效，而侧边栏常被套在 display: flex 或 height: 100vh 的布局里，导致父容器不产生滚动，sticky 就一直“卡住”不动。
- 确保侧边栏的直接父元素具备滚动能力（比如设了
overflow-y: auto且内容超长） - 避免父元素用了
transform、filter、will-change—— 这些会创建新的层叠上下文，让sticky失效 - 小屏下不要强行保留
sticky，该切就切，用@media控制定位方式
flex 布局中 sidebar 固定高度与自适应冲突怎么解
用 display: flex 做主布局时，侧边栏高度常被拉满（align-items: stretch 默认行为），但又想让它随内容撑开、顶部对齐，同时大屏下固定在视口左侧——这本质是「尺寸控制权」的归属问题。
- 大屏：给侧边栏设
min-height: 100vh+position: fixed，再用top/left锚定，脱离 flex 流动 - 小屏：用
position: relative+width: 100%，让它回归 flex 子项流式行为 - 别依赖
flex: 0 0 auto想“固定宽度又自适应高度”，它只管分配空间，不管定位
@media 断点里 top / bottom 切换容易漏掉的重置项
从大屏 position: fixed; top: 0; left: 0; 切到小屏 position: fixed; bottom: 0; width: 100%;，光改 top 和 bottom 不够，遗漏会导致错位或遮挡。
立即学习“前端免费学习笔记（深入）”；
- 必须显式重置
top: auto和left: auto，否则大屏样式仍会参与计算 -
z-index要统一管理，小屏底栏常需高于主内容，但不能无脑设9999，和弹窗、提示框冲突 - 如果侧边栏含可滚动区域（如菜单列表），小屏下要加
overflow-y: auto并限制最大高度，不然会撑爆 viewport
最麻烦的不是写断点，而是侧边栏内部子元素（比如按钮、链接）在两种定位模式下继承的 margin、padding 表现不一致，建议所有内边距都用 class 单独控制，别依赖父级定位方式带出来的隐式行为。
