https://i.sstatic.net/lIsnd.png
https://i.sstatic.net/Nftto.png
I am currently developing a Vue component that utilizes an API call to search for a list of cities based on user input. My challenge is ensuring that the displayed list does not overlap with the header component, specifically overlapping the image of the sky in the background. I have attempted to use z-index without success.
Any alternative solutions or suggestions for implementation are greatly appreciated. I have also tried using a dropdown menu, but encountered issues with writability.
Update: apologies for forgetting to include the code snippet.
<!--template-->
<div class="input-city">
<input v-model="input" type="text" ref="citySearch" />
<div class="cities-list">
<span
v-for="city in results"
:key="city.id"
@click="setCity(city)"
class="city-item"
>
{{ city.name }}, {{ city.region }}, {{ city.country }}
</span>
</div>
</div>
// styles
.input-city {
display: flex;
flex-direction: column;
}
.cities-list {
display: flex;
flex-direction: column;
}
.city-item {
border: 1px solid black;
}