Mapbox独立地理编码器两个自动完成输入css输出视觉交叉问题

我有mapbox单独的geocoder两个自动完成输入和输出CSS视觉交叉问题-当我输入一些东西时，class.suggestions包装在第二个输入下面（input.mapboxgl ctrl geocoder--input）有什么方法可以使它正常工作吗

$（文档）.ready（函数（）{
mapboxgl.accessToken='pk.eyJ1IjoidmltcGlsIiwiYSI6ImNrMjhvNXU0MTIyZGszbG16dWw1enVlamwifQ.5DWWvMDwGn1VfUD9uJjBEg'；
var map=new mapboxgl.map({
容器：“地图主页”，
风格：'mapbox://styles/mapbox/streets-v11',
中间：[-79.4512,43.6568]，
缩放：13
});
window.pick\u up\u forntiput=新MapboxGeocoder({
accessToken:mapboxgl.accessToken，
mapboxgl:mapboxgl，
占位符：'Pick Up Location'，
国家：'gb'，
});
document.getElementById（'pick\u-up\u-forntiput'）.appendChild（pick\u-up\u-forntiput.onAdd（map））；
window.dropp\u off\u forntiput=新MapboxGeocoder({
accessToken:mapboxgl.accessToken，
mapboxgl:mapboxgl，
占位符：'dropoff Location'，
国家：'gb'，
});
document.getElementById（'dropp\u off\u forntiput'）.appendChild（dropp\u off\u forntiput.onAdd（map））；
});

目前有两种方法可以解决此问题：

1） 更改第一个字段的CSS样式，使包含所有地址的.suggestions类位于第二个字段下

 #pick_up_forntinput ul.suggestions {
    top: 60px;
    position: absolute;
}

2） 为第二个字段制作脚本，使其在上消失。出现建议类

$（文档）.ready（函数（）{
mapboxgl.accessToken='pk.eyJ1IjoidmltcGlsIiwiYSI6ImNrMjhvNXU0MTIyZGszbG16dWw1enVlamwifQ.5DWWvMDwGn1VfUD9uJjBEg'；
var map=new mapboxgl.map({
容器：“地图主页”，
风格：'mapbox://styles/mapbox/streets-v11',
中间：[-79.4512,43.6568]，
缩放：13
});
window.pick\u up\u forntiput=新MapboxGeocoder({
accessToken:mapboxgl.accessToken，
mapboxgl:mapboxgl，
占位符：“提取位置”，
国家：'gb'，
});
document.getElementById（'pick\u-up\u-forntiput'）.appendChild（pick\u-up\u-forntiput.onAdd（map））；
window.dropp\u off\u forntiput=新MapboxGeocoder({
accessToken:mapboxgl.accessToken，
mapboxgl:mapboxgl，
占位符：“放置位置”，
国家：'gb'，
});
document.getElementById（'dropp\u off\u forntiput'）.appendChild（dropp\u off\u forntiput.onAdd（map））；
});
$（文档）.on（'input'，'pick#up_forntiput'，函数（）{
setTimeout（函数（）{
if（$（“#pick#up_forntiput.mapboxgl ctrl geocoder.suggestions”）是（“：visible”）{
$（'div#drop#off(u forntiput'）。隐藏（“慢”）；
}否则{
$（'div#drop#off(u forntiput'）。show（“slow”）；
}
}, 300);
});