eu peguei para arrumar um bug num form de pesquisa de um site, porém no mobile, quando clica na opção distance que tem uma lista os inputs ficam sobrepondo essa lista, de forma que não da pra ver as opções, ja tentei colocar position absolute, relative, static, tentein mexer na z-index, e tmbém não deu certo, não sei mais como resolver esse problema
hoje, com a Alura e o Google Gemini
Se você puder postar uma foto do que está rolando e o código fica mais fácil de entender o problema.
ok vou enviar
<div class="vehica-search-classic-v2__fields--wrapper">
<div class="vehica-search-classic-v2__fields">
<div class="vehica-search__field vehica-relation-field elementor-repeater-item-e56e170 vehica-results__field--relation_show">
<div class="vehica-taxonomy-select">
<!---->
<div dir="auto" class="v-select vs--searching vs--searchable">
<div id="vs3__combobox" role="combobox" aria-expanded="false" aria-owns="vs3__listbox" aria-label="Search for option" class="vs__dropdown-toggle">
<div class="vs__selected-options">
<input placeholder="Zip Code" name="zip" id="car-zip" type="search" autocomplete="off" class="vs__search">
<div list="list-model">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="vehica-search__field vehica-search__field--radius vehica-relation-field vehica-results__field--relation_show">
<div class="">
<div dir="auto" class="v-select vs--single">
<div id="vs1__combobox" class="vs__dropdown-toggle">
<input placeholder="Distance" list="list-distance" name="radius" type="search" autocomplete="off" class="vs__search">
<div list="list-distance">
<span>10</span>
<span>25</span>
<span>50</span>
<span>100</span>
<span>150</span>
<span>200</span>
<span>300</span>
<span>500</span>
<span>1000</span>
</div>
</div>
</div>
</div>
</div><div class="vehica-search__field vehica-search__field--radius vehica-relation-field vehica-results__field--relation_show">
<div class="">
<div dir="auto" class="v-select vs--single">
<div id="vs1__combobox" class="vs__dropdown-toggle">
<input placeholder="Choose Make" list="list-make" name="make" id="car-make" type="search" autocomplete="off" class="vs__search">
<div list="list-make">
<span>Choose Make</span>
<span>Acura</span>
<span>Buick</span>
<span>Cadillac</span>
<span>Chevrolet</span>
<span>Chrysler</span>
<span>Citroen</span>
<span>Daewoo</span>
<span>Dodge</span>
<span>Fiat</span>
<span>Ford</span>
<span>GMC</span>
<span>Genesis</span>
<span>Honda</span>
<span>Hudson</span>
<span>Hyundai</span>
<span>Infiniti</span>
<span>Jeep</span>
<span>Kia</span>
<span>Lexus</span>
<span>Mazda</span>
<span>Mitsubishi</span>
<span>Nissan</span>
<span>Peugeot</span>
<span>Pontiac</span>
<span>Ram Trucks</span>
<span>Renault</span>
<span>Saab</span>
<span>Subaru</span>
<span>Suzuki</span>
<span>Toyota</span>
<span>Volkswagen</span>
<span>Volvo</span>
</div>
</div>
</div>
</div>
</div>
<div class="vehica-search__field vehica-relation-field elementor-repeater-item-e56e170 vehica-results__field--relation_show">
<div class="vehica-taxonomy-select">
<!---->
<div dir="auto" class="v-select vs--searching vs--searchable">
<div id="vs3__combobox" role="combobox" aria-expanded="false" aria-owns="vs3__listbox" aria-label="Search for option" class="vs__dropdown-toggle">
<div class="vs__selected-options">
<input placeholder="Model" name="model" type="search" autocomplete="off" class="vs__search">
<div list="list-model">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="vehica-search-classic-v2__search-button-wrapper"><button type="submit" class="vehica-button"><span class="vehica-button__text">Search</span> <i class="fas fa-search"></i></button></div>
</div>
</div>
</form>
</div>
</div>
</div>
o problema é que no mobile as divs ficam embaixo dos inputs...
mandei o codigo em partes porque não cabia inteiro
