侧边栏被压缩需设flex-shrink: 0并配合min-width: 240px；通栏导航须固定高度、加overflow: hidden；fixed侧边栏在safari中偏移需同时声明top和left，避免transform等属性干扰。
顶部通栏导航 + 侧边栏是中后台系统最常见布局，但直接套用 float 或 flex 容易出错——不是导航塌陷、就是侧边栏被压缩、或者移动端点击穿透。核心问题不在“怎么写”，而在“谁控制尺寸、谁负责定位、谁接管响应式状态”。
nav + flex 布局下侧边栏被压缩怎么办
常见现象：display: flex 的父容器里，nav 和 aside 并排时，aside 宽度忽大忽小，甚至缩成一条线。
- 根本原因是没切断 flex 项目的收缩行为：必须给侧边栏最外层加
flex-shrink: 0 - 别只设
width: 240px，改用min-width: 240px，否则小屏下会强制挤压内容 - 如果用了
flex-direction: column做垂直布局，nav必须设固定高度（如height: 60px），否则它会随内容撑开，破坏通栏效果 - 通栏导航本身要加
overflow: hidden，防止内部浮动元素导致高度塌陷
position: fixed 侧边栏在 Safari 中偏移
错误现象：侧边栏设置了 position: fixed; top: 0; left: 0，但在 iOS Safari 里向下滚动时位置飘移，或初始渲染错位。
- 必须同时声明
top: 0和left: 0（缺一不可），Safari 对单边 fixed 解析不一致 - 如果父容器有
transform、perspective或filter，会创建新的 stacking context，导致 fixed 失效——检查 body 或 wrapper 是否意外加了这些属性 - 避免在 fixed 侧边栏内部用
margin-top模拟通栏间隙，改用padding-top: 60px并配合box-sizing: border-box
移动端收起侧边栏后焦点和屏幕阅读器仍可访问
单纯用 display: none 或 visibility: hidden 隐藏侧边栏，键盘用户 Tab 还能进、NVDA 仍播报菜单项，这不是隐藏，是障眼法。
- 真隐藏要用
inert属性：el.setAttribute('inert', '')，比 CSS 更彻底 - 同步设置
aria-hidden="true"，确保辅助技术跳过该区域 - HTML 上用
data-collapsed="true"标记状态，CSS 写[data-collapsed="true"] { transform: translateX(-100%); }，动画走transform而非left，避免重排 - 侧边栏收起时，务必给
body加overflow: hidden，否则背景内容仍可滚动
nav 内部下拉菜单 hover 失效或层级错乱
鼠标移到一级菜单上，二级菜单闪一下就消失；或二级菜单被侧边栏遮住，z-index 不生效。
- 下拉菜单的
ul必须嵌套在对应li内，不能脱离语义结构，否则:hover无法触发 -
z-index只对定位元素有效：确保下拉菜单有position: absolute，且其最近的已定位祖先（通常是li）设了position: relative - 不要给
nav设overflow: hidden，否则下拉菜单会被裁掉——改用overflow: visible或删掉该声明 - 如果侧边栏也用了
position: fixed，它的z-index必须低于导航下拉层（比如导航设z-index: 1000，侧边栏设z-index: 990）
最难的不是让布局“看起来对”，而是每次折叠、滚动、聚焦、缩放后，DOM 结构、CSS 渲染层、ARIA 状态、焦点顺序这四者是否还对得上——漏掉任意一个，用户就会卡在看不见的链接上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
