functonality of drop downs on leaflet map, when introjs added is missed

Question

i have a complicated html code that if i describe it simplely it composed of following parts:

1- a leaflet map covering full page;

2- a button which when clicked some vertically oriented accordin type tabs opened;

3- a set of dependent drop down lists as in first there is province and corresponding district options.

here drop down lists are positioned on top left corner of map.

i want to add a step by step guided tour for first load of page for users, using introJS.

when i add related coding, the drop down functionality is stoped and i cant select any option from list. but when the drop down is located beside the map, not on map, they worked.

any one can help how should i provide styles so that the drop down lists are also selectable when placed on map?

here is the style i use for the parts:

#map {
    position: absolute;
    width: 100%; 
    height: 100%;
    z-index:1;
}

#corner-button {
    z-index:1002;    
    position: block;
    
}
#top-left {
    top: 5px;
    left: 0;
    width:30px;
    z-index:1002;
    position: block;

}
#top-left1 {
    top: 10px;
    left: 30px;
    height:50px;
    display: inline-block;  or inline-flex 
    position: block;

}
#Dropdownscontrols-container {
    z-index:1002;
     position: block;
   }
#Dropdownscontrols {
    z-index:1002;
    position: block;
    } 

and here is related div codes:

<div id="corner-button top-left" style="z-index:1001" >
    <!-- Controls -->
    <div id="Dropdownscontrols-container" style="align-items: center;">
        <div id="Dropdownscontrols" style="display: flex; align-items: center;">
            <button id="infoButton">
                <i class="fas fa-layer-group"></i>
            </button>

            <div style="background-color: #e0f3db;text-align: center; line-height: 1; border: 3px solid #ccc;">
                <p style="font-weight: bold; color: black; margin: 0;">selection</p>
                ....
            </div>
        </div>
    </div>
</div>

<!--========================================-->



<div id="corner-button top-left1" >
    <!-- Controls -->
    <div class="Tabscontrols-container">
        <div class="Tabscontrols">
            <div id="accordion" style="display: none;">
                -----
                </div>
        </div>
    </div>
</div>