您如何相对定位 Select2 下拉菜单？

Posted 2023-05-07

【中文标题】您如何相对定位 Select2 下拉菜单？

【英文标题】：How do you relatively position a Select2 dropdown?

【发布时间】：2020-07-05 15:04:29

【问题描述】：

我正在创建一个 d3 数据可视化，我希望在我为 d3 绘制的 <svg> 顶部放置一个 html <select> 下拉列表（两者都在父级 <div> 内）。按照以下方式添加 css 很容易

width: 400px;
position: 'relative';
left: 100px;
top: 50px;

到<select>，效果很好。

但是，我希望下拉菜单可以搜索，一旦我添加了select2 代码$("#dropdownID").select2();，整个下拉菜单突然移动到 SVG 下方（但确实可以搜索）。当我在浏览器中检查它时，原来的<select> 显示为在正确的位置，但不可见，并且各种新的select2 相关<span>（看起来像一个下拉菜单）是什么实际显示在下方。

我尝试弄乱<select> 的css，以及可以传递给select2 调用的dropdownCss 和containerCss 选项，但只能设法进一步破坏。

有什么建议吗？提前致谢！

【参考方案1】：

我仍然很好奇是否有更直接的方法，但我找到了一个足够简单的解决方法 - 将 <select> 放在 <div> 中，并将定位应用于父 <div>（包括 select2 <span> 的创建）。