下拉菜单位置偏移是因为父容器未设置 position: relative；该声明使父元素成为 absolute 子元素的定位参考点，且不脱离文档流、不影响布局，兼容 IE9+。
下拉菜单位置偏移，是因为父容器没设 position: relative
绝对定位（position: absolute）的下拉菜单，会相对于最近的「已定位祖先元素」计算位置。如果父级没设 position: relative（或 absolute/fixed），浏览器就会一路往上找，最终可能锚定到 body 或 html，导致菜单出现在页面任意角落。
为什么只加 relative 就够了？它不改变布局流
position: relative 本身不触发新的定位上下文（position: static 才是默认值），但它会让该元素成为后续 absolute 子元素的定位参考点，且不会像 absolute 那样脱离文档流、影响其他元素排版。
- 不用改 HTML 结构，也不用加额外 wrapper
- 不影响父容器原本的宽高、margin、padding 行为
- 兼容所有现代浏览器，包括 IE9+
常见错误写法和排查点
即使写了 relative，菜单仍错位，大概率是下面这些原因：
- 父级选择器写错了 —— 比如给
.nav-item加了relative，但下拉菜单实际在.nav-link内部，那真正需要加的是.nav-link - 父级有
transform、filter或will-change—— 这些属性会创建新的层叠上下文，同时也会“劫持”absolute的定位参考，使其相对于该元素而非relative父级 - 父级设置了
overflow: hidden且高度不够 —— 菜单被裁剪，看起来像“消失”或“偏移” - CSS 优先级冲突：其他样式覆盖了你的
relative，用浏览器开发者工具检查 computed 样式里的position值是否真为relative
最小可复现示例
.dropdown {
position: relative; /* 关键：锚定下拉菜单 */
}
<p>.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
margin-top: 4px;
}只要确保 .dropdown-menu 是 .dropdown 的直接或间接子元素，且中间没有其他已定位祖先干扰，这个结构就能稳定对齐。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：父级的 transform 和 overflow —— 它们不会报错，也不会在控制台提示，但会悄悄破坏定位逻辑。
