Search code examples
javascriptcssreactjsreact-leaflet

How can I make component always on top of react-leaflet map?

Right now, only when I refresh my page, the table shows for a second and then it disappears. I don't know if its important, but the Map Component is a react-leaflet map. I would like to have a component on all the time on top of the map. How can I stop it from disappearing?

my css file:

.grid{
  height: 100vh;
} 

.map-box{
  position: relative;
  height: 100%;
}
.data-box{
  position: absolute;
  top: 20vh;
  height: 100%;
}

App.js file:

    <div className="App">
      <header className="App-header">
        <h2> </h2>
      </header>
      <body className="grid"> 
        <div className='map-box'> <Map /> </div>
        <div className='data-box'> <Data />  </div>
      </body>
    </div>
``
Solution

  • It's a matter of css. Try giving the data-box style z-index of let's say 10.