下拉菜单偏移错位的根本原因是未给直接父容器设置position: relative，导致absolute定位向上查找已定位祖先元素；应为父容器设position: relative，并用top: 100%配合left: 0实现精准对齐。
下拉菜单用 position: absolute 为什么总偏移错位？
根本原因不是 position: absolute 写错了，而是它默认相对于**最近的已定位祖先元素**（即 position 值为 relative、absolute、fixed 或 sticky 的父级）计算 top/left。如果父容器没设 position: relative，它就一路往上找，最后可能相对 body 定位，导致下拉菜单飞到页面角落。
- 必须给下拉菜单的**直接父容器**（通常是导航项
<li>或按钮<button>外层）加position: relative -
top和left的数值要配合父容器尺寸和菜单自身高度/宽度来调，不能凭空写0 - 如果父容器本身有 padding/border，
top: 0会贴着内容区上边缘，而不是容器框上边缘——这时可能需要top: 100%或微调
top: 100% 比 top: 0 更可靠？
对下拉菜单来说，top: 100% 表示“从父容器底部开始向下展开”，天然避开父容器 padding 和 border 影响，且兼容性好、逻辑清晰。除非你要做悬停后向上弹出（如顶部导航的二级菜单），否则优先用 top: 100%。
-
top: 100%是相对父容器内容高度的 100%，不是视口高度 - 配合
left: 0可让菜单左对齐父容器左侧；若需右对齐，改用right: 0 - 如果菜单宽于父容器，
left: 0可能导致部分被截断，此时应检查父容器是否设置了overflow: hidden
常见布局断裂：子菜单嵌套时 position 怎么链式设置？
二级菜单（如鼠标移到一级菜单项上再出现的右侧弹层）必须保证其父级（即一级菜单项）是已定位元素，否则它的 absolute 会脱离上下文。
- 一级菜单项（
<li class="dropdown">）→ 加position: relative - 一级下拉菜单（
<ul class="dropdown-menu">）→position: absolute; top: 100%; left: 0 - 二级菜单触发项（
<li class="dropdown-submenu">）→ 同样加position: relative - 二级菜单（
<ul class="submenu">）→position: absolute; top: 0; left: 100%（向右展开）
.dropdown {
position: relative;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
margin-top: 4px; /* 可选：留点间隙 */
}
.dropdown-submenu {
position: relative;
}
.submenu {
position: absolute;
top: 0;
left: 100%;
margin-left: 4px;
}z-index 不生效？别忘了层级依赖关系
z-index 只在定位元素（position 不是 static）上起作用，而且它只影响**同层叠上下文内**的兄弟元素。如果下拉菜单被某个父容器的 z-index 截断（比如导航栏用了 z-index: 10，但它的父 <header> 没设 position），那菜单再设 z-index: 999 也没用。
立即学习“前端免费学习笔记（深入）”；
- 确保菜单的**所有上级容器中，只要设了
z-index，就必须同时设position（哪怕只是position: relative）** - 避免在多个不相关容器上乱设高
z-index，容易引发遮挡混乱 - 调试时可用浏览器开发者工具检查“Computed”面板里的
z-index是否生效、叠加上下文是否被创建
实际项目里最常漏掉的，就是那个看似无关紧要的 position: relative 父容器。它不显眼，但缺了整个定位链就断了。
