In the process of developing a ReactJS project, I encountered the challenge of overlapping my search bar autocomplete data with the result div located directly below it. For a more detailed understanding, please take a look at the provided image.
Here's the scenario - when a user clicks on an autocomplete suggestion from the search bar, they should see the results displayed in the result div. https://i.sstatic.net/L4XRn.png
I'm facing difficulty populating the autocomplete data on top of the result div (overlap). How can I accomplish this?
Below is the code snippet for the divs and CSS utilized:
.logout {
float: right;
margin: 0px 0px;
}
.logoutautocomplete {
float: right;
margin: 0px 0px;
z-index: 10000;
display: inline;
}
/* Split the screen in half */
.split {
width: 50%;
position: absolute;
z-index: 1;
top: 165px;
padding-top: 20px;
}
/* Rest of the CSS declarations...*/
<!-- JSX Code Here -->