Как наложить содержимое на листочек с реакцией (проблема z-index)

Question

Действительно пытался не публиковать это, так как я видел похожие вопросы, но я не могу отобразить что-либо в библиотеке листовок реагирования после чтения материалов в Интернете.

В следующих фрагментах кода показана разметка для карты и наложение, которое я пытаюсь создать.

Большое спасибо, любая помощь приветствуется.

Глядя на другие вопросы в Интернете, люди обращаются к тому, чтобы сделать положение контейнера Map: абсолютным и установить z-index равным 400+, что, кажется, не имеет значения для меня с разметкой ниже.

Разметка карты

              <Map
                zoomControl={false}
                doubleClickZoom= {false}
                closePopupOnClick= {false} 
                dragging= {false}
                zoomSnap= {false} 
                zoomDelta= {false} 
                trackResize= {false}
                scrollWheelZoom= {false}
                touchZoom={false}
                className="map"
                worldCopyJump={true}
                center={position}
                zoom={this.state.zoom}>

                <TileLayer
                  attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors and Chat location by Iconika from the Noun Project"
                  url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />

                {this.state.pins.map(pin => (
                  <Marker
                    onClick={() => this.showPanel(pin)}
                    key={pin._id}
                    position={[pin.latitude, pin.longitude]}
                    icon={pinIcon}>
                  </Marker>
                ))}

              </Map>

Наложение разметки

  <div ref={ref => this.el = ref}>
            <button onClick={() => this.setState({ isPaneOpen: true })}>Click me to open right pane!</button>


            <SlidingPane
                className='some-custom-class'
                overlayClassName='some-custom-overlay-class'
                isOpen={ this.state.isPaneOpen }
                title='Hey, it is optional pane title.  I can be React component too.'
                subtitle='Optional subtitle.'
                onRequestClose={ () => {
                    // triggered on "<" on left top click or on outside click
                    this.setState({ isPaneOpen: false });
                } }>
                <div className="container-fluid padding">
                </div>
             </SlidingPane>

Обновление

Я переместил оверлей в функцию, показанную ниже

function MyOverLay(props) {
  return <SlidingPane
      className='some-custom-class'
      overlayClassName='some-custom-overlay-class'
      isOpen={ props.isPaneOpen }
      title='Book here
  </SlidingPane>
}

Изменение разметки показано ниже

Новая разметка

<div>

        <MyOverLay isPaneOpen={this.state.isPaneOpen} />

          <div className="container-fluid padding">

            <div className="row padding">

              <div className="col-lg-8">

                <Map zoomControl={false}
                doubleClickZoom= {false}
                closePopupOnClick= {false} 
                dragging= {false}
                zoomSnap= {false} 
                zoomDelta= {false} 
                trackResize= {false}
                scrollWheelZoom= {false}
                touchZoom={false}
                className="map"
                worldCopyJump={true}
                center={position}
                zoom="13">
                <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
                <Marker
                    position={[10, -10]}
                    icon={messageIcon}>
                </Marker>
            </Map>

          </div>

Answer 1

Управляется, чтобы заставить его работать, управляя значениями z-index в CSS для всех панелей, которые карта отображает на странице. Опция zIndex, доступная на TileLayer, кажется, не работает для меня, но следующее решило проблему. Заметил - протестировал это только в Chrome.

div.map.leaflet-container.leaflet-touch.leaflet-retina.leaflet-fade-anim {
    /*border: 5px solid red;*/
    z-index: 1;
}

div.slide-pane__content {
    /*border: 5px solid black;*/
    z-index: 100;
}

div.ReactModal__Content.ReactModal__Content--after-open.slide-pane.slide-pane_from_right.some-custom-class {
    /*border: 5px solid orange;*/
    z-index: 100;
}

div.slide-pane__header {
    /*border: 5px solid orange;*/
    z-index: 100;
}

div.ReactModal__Overlay.ReactModal__Overlay--after-open.slide-pane__overlay.some-custom-overlay-class {
    /*border: 5px solid blue;*/
    z-index: 100;

}

Answer 2

Решение, о котором я могу только думать, - это использование React Portal. Это особенность React, которая может добавлять компонент вне «корневого» компонента внутри элемента body. Учитывая, что дочерние элементы в нижней части родительского элемента имеют более высокий индекс стека, чем в верхней части, он может «перекрывать» любой компонент внутри корневого компонента. Попробуйте обернуть ваш компонент так:

import React from 'react';
import ReactDOM from 'react-dom';

const OverlayComponent = () => {
   return ReactDOM.createPortal(
      <MyComponent />,
      document.body
   );
};