必须给触发按钮的直接父容器加 position: relative，否则绝对定位的下拉菜单会相对于 body 定位而错位；箭头需用 top: 100% + left: 50% + transform: translatex(-50%) 居中对齐按钮底边；菜单截断主因是祖先元素 overflow: hidden，须逐级检查并覆盖或动态挂载到 body。
必须给触发按钮的直接父容器加 position: relative，否则 position: absolute 的下拉菜单会相对于 body 或其他意外祖先定位，几乎必然错位。
为什么下拉菜单总飘到左上角？
这是最典型的定位失效现象，本质是绝对定位失去了正确的参照系。浏览器会沿着 DOM 向上查找第一个 position 不为 static 的祖先，如果没找到，就落到 body 上——而 body 的左上角通常不是你想要的起点。
- 检查下拉菜单（如
.dropdown-menu）的直接父元素（比如.dropdown-item或li），它必须显式设置position: relative - 不要只在最外层导航栏（如
.navbar）上设position: relative，那会把所有子菜单都锚定到整个栏位左上角 - 避免在中间某层容器误加
position: relative且带transform或overflow: hidden，这会创建错误的包含块并裁剪内容
如何让箭头始终对准按钮中心？
伪元素箭头（::before 或 ::after）偏移失准，往往是因为 left 值写死了，或参考系没对齐触发按钮本身。
- 给触发按钮（如
button或a）设position: relative，而不是它的父div或li - 箭头用
top: 100%+left: 50%+transform: translateX(-50%)，这样它始终居中于按钮底边中点 - 别用
left: 20px这类固定值——按钮文字长度变化时，箭头就会跑偏
菜单被截断、只显示一半？
这不是 z-index 问题，而是父容器的 overflow: hidden 在起作用。CSS 的裁剪行为优先级高于定位和层级。
- 检查下拉菜单的**直接父级**和**所有向上路径中的祖先**，特别是
.navbar、.header、.nav-wrapper这类常见容器 - 框架（如 Bootstrap）常默认给
.navbar加overflow: hidden，需针对性覆盖：.navbar { overflow: visible; } - 更健壮的做法是把下拉菜单节点用 JS 动态挂到
document.body下，再用getBoundingClientRect()计算位置，彻底绕过父容器溢出限制
真正难的不是写对那几行 CSS，而是确认「谁是定位上下文」和「谁在裁剪内容」这两件事——它们藏在 DOM 结构深处，不 inspect 元素很难发现。每次错位，先打开开发者工具，挨个看父级的 position 和 overflow 值，比反复调 top 和 left 有效得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
