不用 position: absolute 做主导航容器，因其脱离文档流导致父容器塌陷、滚动异常、与兄弟元素重叠，且无法响应动态内容变化；真需侧边栏应优先用 position: fixed 并显式控制尺寸与避让。
用 position 实现垂直导航条，本质是绕过文档流控制布局，但容易踩坑——它不自动占位、不响应内容变化、移动端易错位。真要这么做，得明确知道为什么不用 flex 或 display: block，否则就是给自己埋雷。
为什么不用 position: absolute 做主导航容器？
垂直导航条若用 position: absolute 包裹整个 ul，会导致父容器塌陷、滚动异常、与兄弟元素重叠。尤其当页面有动态内容（比如 JS 插入新模块）时，绝对定位的导航栏不会触发重排，极易遮挡或错位。
- 只对单个
li或a用position: absolute—— 比如图标定位、角标提示，不是整套导航 - 若必须全屏侧边栏定位，优先用
position: fixed+top: 0; left: 0; height: 100vh;，并手动设width -
position: relative只用于给子项提供定位上下文，本身不改变布局流
position: fixed 垂直导航栏的关键参数
固定定位适合常驻侧边栏，但需显式控制尺寸和避让。浏览器不会自动计算“剩余宽度”或“避开 header”，全靠你写死。
- 必须设
width（如width: 240px），否则默认收缩到内容宽度 - 高度推荐用
min-height: 100vh，而非height: 100vh，防止内容超长时被截断 - 加
overflow-y: auto，否则长菜单在小屏上无法滚动 - 若页面有
header固定在顶部，需用top: 64px（假设 header 高 64px）来避让，不能依赖自动计算
绝对定位 + top/bottom 控制单项顺序的陷阱
有人试图用 position: absolute + top: 0、top: 50px、top: 100px 手动堆叠导航项，这在静态页面看似可行，但一加 hover 动画、一换字体、一做国际化（中英文混排高度不同），就全乱套。
-
top值必须是精确像素或 rem，百分比会相对于父容器高度，而父容器往往没设高 - 新增一项就得重算所有
top，维护成本爆炸 - 无法用
:hover触发相邻项过渡动画（transition对top有效，但逻辑耦合太强） - 无障碍支持差：屏幕阅读器可能按 DOM 顺序读，但视觉顺序被
top打乱
真正该用 position 的地方：二级菜单弹出
垂直导航条里的下拉菜单（二级项）才是 position: absolute 的合理场景——它本就不该占文档流，且需脱离父项定位。
- 父
li必须设position: relative，否则absolute子菜单会相对于 body 定位 - 二级
ul设position: absolute; top: 100%; left: 0;，紧贴父项下方展开 - 加
min-width: 100%，避免子菜单比父项窄导致鼠标移出时收起 - iOS Safari 点击无响应？补
cursor: pointer和-webkit-tap-highlight-color: transparent
用 position 做垂直导航条，不是“能不能”，而是“值不值得”。多数情况下，display: block 或 flex-direction: column 更稳、更可维护、更易扩展。只有当你需要脱离文档流做悬浮、锚点联动、或复杂交互动效时，才该把 position 拿出来用——而且得清楚它不负责布局，只负责“放哪儿”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
