Select下拉框被overflow遮挡的问题

时间:2024-03-22 14:23:21

问题概述

  如果你没有使用插件,没有使用别人给的组件,这个问题一般是不会出现的。但是如果你使用了别人的组件,那么你就会遇到这个问题。我这里说说我遇到的这个问题的地方,总共是2个地方。

  1. 是我在使用iview的,使用select,由于父级框position: relative,并且overflow:auto,所以select下拉框的时候就被挡在父级下面(虽然滚动可以看到,但是觉得很不舒服)Select下拉框被overflow遮挡的问题
  2. 是我在使用vue-treeselect的时候,这个哥们也是和上面一样,被挡在了下面。(这个不演示了,道理一样)

上述问题的解决

  1. iview的select组件里面有一个transfer属性,添加就可以使下拉框到最高层,没有东西可以遮挡。Select下拉框被overflow遮挡的问题
  2. vue-treeselect是采用了里面的appendToBody属性为true,和设置z-index属性为9999,使之到最高层显示。(这个不演示了,道理一样)

分析

  上面两种的select插件处理方法也是人家插件里面准备好的,我只是使用而已。但是我在前端通过源代码的查看,发现其实他们的处理方式是一摸一样的。

  他们的处理方式都是将下拉框整体加入到body里面,这样下拉框所处的位置就不是原来select的父级框下面了,而是在body里面,然后定位到指定位置,通过position和z-index,绝对定位absoult到指定的位置,然后将层级提高,这样的下拉框显示出来就是最高层级,也不会收到父级框的限制。