MapBox contenant MapBox-gl-géocodage chevauche les résultats

J'ai 2 conteneurs standard MapBox MapBox-gl-géocodeur un sur l'autre. Et lorsque les résultats de la recherche de la première apparaît dans la liste déroulante, le second conteneur se superpose les résultats. J'ai essayé z-index css 1000 sur li, ul, etc., mais rien ne fonctionne. Maintenant, je me suis retrouvé avec

geocoderStart.on('results', function(ev) {
            document.getElementById('geocoderEnd').style.visibility = hidden;
        });
        geocoderStart._inputEl.addEventListener('input', function (e) { document.getElementById('geocoderEnd').style.visibility = hidden; });
        geocoderStart._inputEl.addEventListener('blur', function (e) { document.getElementById('geocoderEnd').style.visibility = visible; });

mais il est buggy. Est-il un moyen simple de css superposer deuxième entrée avec des résultats li? Merci

code de mon

const geocoderStart = new MapboxGeocoder({
            accessToken: mapboxgl.accessToken,
            mapboxgl: mapboxgl,
            countries: 'us',
            marker : false,
            flyTo : false,
            placeholder : Starting point,
        });
        const geocoderEnd = new MapboxGeocoder({
            accessToken: mapboxgl.accessToken,
            mapboxgl: mapboxgl,
            countries: 'us',
            marker : false,
            flyTo : false,
            placeholder : Destination point,
        });

        document.getElementById('geocoderEnd').appendChild(geocoderEnd.onAdd(map));
        document.getElementById('geocoderStart').appendChild(geocoderStart.onAdd(map));