绝对定位子菜单飘到页面右上角，是因为浮动父容器不构成定位上下文；须给父级加position: relative或改用flex布局，并确保触发下拉的设position: relative。
浮动父容器没触发定位上下文，子菜单找不到参照
多级菜单里 .submenu 一展开就飘到页面右上角，不是 z-index 设低了，而是父级用了 float: left，导致它既不占高度，也不算“已定位祖先”。position: absolute 的子菜单只能往上找，最后落到 上——这根本不是遮挡，是定位失效。
解决办法不是给子菜单加 z-index，而是让父级“被认出来”：
- 删掉父级的
float，改用display: flex横向排列（推荐） - 若必须保留浮动，给父级同时加
position: relative和zoom: 1（IE 兼容）或overflow: hidden（现代浏览器） - 确认父级没有
overflow: hidden截断子菜单——它会把下拉部分直接砍掉
清除浮动只清了布局，没清层叠上下文
很多人在父容器上加了 .clearfix 类，菜单位置是正常了，但 hover 时还是被盖住。这是因为 clear: both 解决的是文档流塌陷，不是层叠顺序问题。
真正起作用的是：父级是否成了独立的层叠上下文。一旦它带了 z-index: 0 或 transform，子菜单的 z-index: 999 就只在它内部比大小，跟导航栏、弹窗完全无关。
- 检查父级导航容器（比如
#nav）有没有无意义的z-index: 0，删掉 - 子菜单的直接父
必须有position: relative，且不能设z-index - 全站统一控制层级：只在最外层导航容器设一个
z-index: 100，其余靠 DOM 顺序和定位自然堆叠
IE6–IE7 下 hover 断裂和闪烁
鼠标移向子菜单瞬间消失，不是 CSS 写错了，是 IE6/7 的 hasLayout 没触发，hover 状态传不下去。
- 给触发 hover 的
加zoom: 1或height: 1% - 子菜单别用
display: none切换，改用visibility: hidden+opacity: 0 - 避免写
li:hover ul li a这种嵌套过深的选择器，IE6 只支持两级：最多li:hover ul
现代方案里仍要补的一课：flex 不等于自动定位上下文
换成 display: flex 后菜单还偏移？别怪 flex，怪你忘了加 position: relative。
flex 布局解决了浮动塌陷，但没改变 position: absolute 的定位规则——它依然需要最近的非-static 祖先。那个触发下拉的 ，如果没设 position: relative，子菜单照样飞走。
- flex 容器本身不用加定位，但它的直系子元素（即每个菜单项
）必须显式设position: relative - 不要给 flex 容器加
z-index，它会创建新层叠上下文，反而锁死子菜单的层级 - 测试时用 DevTools 的「Layers」面板看子菜单是否真的渲染在预期层上，而不是靠猜
真正卡住人的，从来不是“怎么加 clear”，而是加完之后发现 z-index 不生效、hover 失效、子菜单乱飘——这些问题都藏在层叠上下文和定位参照链里，不打开开发者工具看 computed 值，光调样式只会越调越乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
