Как вы относительно позиционируете выпадающий список Select2?

Question

Я создаю визуализацию данных d3 и хочу, чтобы раскрывающийся список html <select> располагался поверх <svg>, который я рисую для d3 (оба находятся внутри родительского элемента <div>) , Достаточно просто добавить css вдоль строк

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

к <select>, и это прекрасно работает.

Однако я хочу, чтобы раскрывающийся список был доступен для поиска, и один раз Я добавляю в select2 код $("#dropdownID").select2(); внезапно весь выпадающий список перемещается ниже SVG (но становится доступным для поиска). Когда я проверяю его в своем браузере, оригинальный <select> обнаруживается как находящийся в правильном положении, но невидимый, и множество новых <span> связанных *1014* (которые выглядят как выпадающие) являются тем, что на самом деле отображается ниже.

Я пытался связываться с css для <select>, а также с опциями dropdownCss и containerCss, которые можно передать в вызов select2, но удалось только сломать вещи дальше.

Есть предложения? Заранее спасибо!

Answer 1

Мне все еще интересно, есть ли более прямой метод, но я нашел достаточно простой обходной путь - поместите <select> в <div> и примените позиционирование к родительскому <div> (который включает в себя select2 <span>, которые созданы).