react-leaflet 隐藏一个下拉菜单

Question

React-leaflet当我在顶部引入一个下拉菜单时，它隐藏在地图后面，当我把它下拉时。任何帮助将被感激。下面是一个屏幕截图，它是如何渲染在我的前台。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css'
const position = [-0.29008, 3.81987]

class App extends Component {

  render() {
    return (
      <div>
<div className='form-row'>
                    <div className='form-group col-md-12'>
                        <Select
                            placeholder='Search a single Fleet'
                            options={[{ value: 'clear', label: 'Clear Search' }, ...options]}
                            key={'show'}
                            onChange={(e) => {
                                if (e.value === 'clear') setTheVehicle(undefined)
                                else setTheVehicle(e.value)
                            }}
                        />
                    </div>
                </div>


        <Map center={position} zoom={13}>
            <TileLayer
                        url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
                        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                    />
          <Marker position={this.state.center}>
            <Popup>
              A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
          </Marker>
        </Map>
      </div>
    );
  }
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement); 

Answer 1

相当小的懒惰的答案，但花了我的时间:检查新的风格，在第一 <div>

<div className='form-row' style={{position: 'relative', z-index: 999}}>
                    <div className='form-group col-md-12'>
                        <Select
                            placeholder='Search a single Fleet'
                            options={[{ value: 'clear', label: 'Clear Search' }, ...options]}
                            key={'show'}
                            onChange={(e) => {
                                if (e.value === 'clear') setTheVehicle(undefined)
                                else setTheVehicle(e.value)
                            }}
                        />
                    </div>
                </div>