Cascader组件子菜单位置错乱，怎么调整CSS才能正确显示？

永穗的笔记提问于 2026-02-02 14:47:24 阅读 63

组件

在做地区选择时用了Cascader组件，但二级菜单总是挤在一级菜单旁边，不是层叠下拉的效果。我尝试给子菜单加了


.el-cascader-menu+.el-cascader-menu {
  margin-left: 20px;
  position: absolute;
  top: 0;
}

结果子菜单直接堆到页面左侧去了，还被其他元素遮挡。调整position和z-index都没用，是不是定位方式有问题？

导航组件

我来解答赞 15 收藏

反馈

2 条解答

码农小倩 Lv1

你这个问题是 Cascader 子菜单定位错位，直接加下面这段 CSS 强制修正：

.el-cascader-menu__item + .el-cascader-menu {

  position: absolute !important;

  top: 0 !important;

  left: 100% !important;

  z-index: 9999 !important;

}

错位是因为 Cascader 菜单层级定位是 relative + absolute 混合导致的，单纯加 margin 会脱离文档流但定位基准不对，必须强制定位到父菜单右边。

2026-02-03 21:01

UP主～春莉 Lv1

这个问题挺常见的，Cascader组件的子菜单定位确实容易出问题。你现在的写法有问题，不能直接用 position: absolute 来调整，因为它的父级容器没有设置相对定位。

CSS的话，你可以试试这样：

.el-cascader-menu {

  position: absolute !important;

}



.el-cascader-panel {

  position: relative;

}

重点是给 .el-cascader-panel 设置成相对定位，让它成为子菜单的定位参考点。然后再确保子菜单是绝对定位。

另外，如果你发现还是被遮挡，检查下外层容器的 overflow 属性，有可能被哪个莫名其妙的 overflow: hidden 给坑了。这种事前端老司机都遇见过，懂的都懂。

2026-02-02 15:00