Overlapped Link button not navigating in less screen size reactjs

Question

I am working on a front-end design, for smaller screen sizes using reactjs, there is an issue, when I reduce my browser size below 600px, There is button that is wrapped inside a Link that navigates to another page and does not work , the same works in my browser full size i.e more than 600px.

I am showing the list in Reactjs on conditional rendering like this :

<div className='SearchInputMain'>

  <div className='RestSearchInput'>

      <input className="icon" type="text" placeholder="  Search for restaurants" onMouseEnter={() => this.setState({ isHovering : true})}
  style={{ paddingLeft: '50px', fontFamily: 'Poppins', opacity: "85%" }} onChange={(e) => this.handleSearchChange(e)} /></div>

     <div className='RestSearchDetails'>

         {
   this.state.isHovering &&
   <div className='RestaurantListCSS1' onMouseLeave={() => this.setState({ isHovering: false})}>
      {
                                   
         <>
        {
             restaurantList ? restaurantList : ''
          }
       </>
           }

        </div> 
          }

     </div>

I am using media queries to style CSS for less than 600px browser screen width, I tried increasing the z-index but does not work for less than 600px

here is the button code

<Link to='/restaurants/filter/1' > <button className='btn btn-success Search_More' onClick={() => console.log('search clicked')}> Search restaurants All over India !!! Click Here !! </button> </Link>

and CSS I am using for less than 600px screen size :

@media screen and (max-width:600px) {
/*  SearchBar css for small mobile*/
   .SearchInputMain{
      position: relative;
      width: 400px;
      height: 229px;
      margin-top: 15px;
      margin-left: 30px;
      z-index: 2;
   }

  .Search_More{    // this is the button getting overlapped and not navigating when clicked
    position:relative;
    display: inline-block;
    margin-left: 80px;
    margin-top: 10px;
    z-index:1;
  }
}

but the same works for more than 600px or full-screen width like this:

@media screen and (min-width:600px) {

/*  SearchBar css for large*/
   .SearchInputMain{
      position: absolute;
      width: 400px;
      height: 229px;
      margin-top: -60px;
      margin-left: 590px;
      
   }

  .Search_More{  // this works fine
    position: absolute;
    margin-left: 680px;
    top: 518px;
    
  }
}

this image might show you better:

Is there an issue in button or Link being overlapped in small screen size (less than 600px) in Reactjs or CSS that after overlapping or a div being there does not let the Link or button work?

Answer 1

I just solved it by positioning the ul tag and adding higher zindex to it and not the immediate parent div.

.SearchInputMain{
      position: relative;
      width: 400px;
      height: 229px;
      margin-top: 15px;
      margin-left: 30px;
     
   }

  .RestaurantListCSS1 > ul{   // div which has the ul list added higher index to it

    list-style-type: none;
    padding-left: 10px;
    background-color: #fff;
    text-indent: 20px; 
    margin-bottom: 2px;
    border: solid black;
    position: relative;
    z-index: 9;
    
  }

  .Search_More{
    position: relative;
    margin-left: 80px;
    margin-top: 10px;
    z-index: 2;
  }

Now button is getting overlapped as well navigating and is clickable. Thanks for help