解决iview 的select下拉框选项错位的问题

最新推荐文章于 2025-05-08 22:51:57 发布

原创最新推荐文章于 2025-05-08 22:51:57 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

css 同时被 2 个专栏收录

13 篇文章

订阅专栏

weex

3 篇文章

订阅专栏

博客内容讲述了在Vue项目中，当弹出框超过一屏需要滚动时，Select组件的下拉选项会出现位置错位。作者通过深入分析组件样式，发现问题是由于.ivu-select-dropdown的position:absolute属性导致的。为了解决这个问题，作者尝试将上一级元素设置为position:relative，并添加top属性来定位弹出框，从而使其保持在Select组件的下方。然而，这种方法固定了弹出框的展开方向。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   当组件在一屏内不会有什么问题，但是当弹出框超过一屏需要滚动时，select的下拉选项会出现
   错位，不在selcet组件上下，因为.ivu-select-dropdown自带的有 position:absolute的样式，所以
   我给它的上一级设置position: relative;在给他设置top:40px ；使弹出框固定在select组件的位置，
   不过有一个小问题，就是弹窗的展开方向被固定住了。

/deep/
.ivu-select{
             position: relative;
               .ivu-select-dropdown{
                   top:40px !important;
               }
           }