title: React-modal hides behind elements
body: <p>I am trying to make use of react-modal for the first time. When I click on the sign-in button, the react-modal component is invoke but seems to be hiding behind the cover page which is a video landing page. </p>
  
  <p>The React devtool displays the appropriate states before the sign-in button is clicked
  <a href="https://i.stack.imgur.com/qW2c1.jpg" rel="noreferrer">before the sign-in button is clicked</a></p>
  
  <p>When the sign-in button is now clicked, the react devtool now displays that the ModalPortal component is rendered showing the appropriate states
  <a href="https://i.stack.imgur.com/2AYNQ.png" rel="noreferrer">when the sign-in button is clicked</a></p>
  
  <p>SignInModal.scss</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>.ReactModalPortal&gt;div {
      opacity: 0;
  }
  
  .ReactModalPortal .ReactModal__Overlay {
      align-items: center;
      display: flex;
      justify-content: center;
      transition: opacity 200ms ease-in-out;
  }
  
  .ReactModalPortal .ReactModal__Overlay--after-open {
      opacity: 1;
  }
  
  .ReactModalPortal .ReactModal__Overlay--before-close {
      opacity: 0;
  }
  
  .modal {
      position: relative;
      background: #464b5e;
      color: white;
      max-width: 90rem;
      outline: none;
      padding: 3.2rem;
      text-align: center;
  }
  
  .modal__title {
      margin: 0 0 1.6rem 0;
  }
  
  .modal__body {
      font-size: 2rem;
      font-weight: 300;
      margin: 0 0 3.2rem 0;
      word-break: break-all;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>CoverPage.js Component</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import Header from './Header';
  import HeaderVideo from './HeaderVideo';
  import SignInModal from './SignInModal';
  
  import React, { Component } from 'react';
  
  class CoverPage extends Component {
    state = {
      modalIsOpen: false
    };
  
    onOpenModal = () =&gt; {
      this.setState(() =&gt; ({
        modalIsOpen: true
      }));
    };
  
    onCloseModal = () =&gt; {
      this.setState(() =&gt; ({
        modalIsOpen: false
      }));
    };
    render() {
      return (
        &lt;div&gt;
          &lt;Header /&gt;
          &lt;HeaderVideo onOpenModal={this.onOpenModal} /&gt;
          &lt;SignInModal
            modalIsOpen={this.state.modalIsOpen}
            onOpenModal={this.onOpenModal}
            onCloseModal={this.onCloseModal}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default CoverPage;</code></pre>
  </div>
  </div>
  </p>
  
  <p>HeaderVideo.js Component</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import Signup from './Signup';
  import CoverInfo from './CoverInfo';
  
  const HeaderVideo = props =&gt; {
    return (
      &lt;div className="video-container"&gt;
        &lt;video preload="true" autoPlay loop volume="0" postoer="/images/1.jpg"&gt;
          &lt;source src="images/vine.mp4" type="video/mp4" /&gt;
          &lt;source src="images/vine1.webm" type="video/webm" /&gt;
        &lt;/video&gt;
        &lt;div className="video-content"&gt;
          &lt;div className="container content"&gt;
            &lt;div className="row"&gt;
              &lt;div className="col-md-9"&gt;
                &lt;CoverInfo onOpenModal={props.onOpenModal} /&gt;
              &lt;/div&gt;
              &lt;div className="col-md-3"&gt;
                &lt;Signup /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default HeaderVideo;</code></pre>
  </div>
  </div>
  
  CoverInfo.js Component</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  
  const CoverInfo = props =&gt; {
    return (
      &lt;div className="info"&gt;
        &lt;div&gt;
          &lt;h1&gt;Welcome to EventCity!&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;p&gt;
            At EventCity! we pride ourselves on the unrivalled personal {`event`} services,we provide
            to our clientele. We guide you from the stressful decision making {`process`},ensuring you
            are comfortable,whether it is a wedding, corporate {`function `}or even a kiddies party,we
            create a buzz around you, taking you to the next level.
          &lt;/p&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;h3&gt;Innovation, {`Performance`} and Delivery&lt;/h3&gt;
        &lt;/div&gt;
        &lt;button type="button" className="btn btn-success btn-lg" onClick={props.onOpenModal}&gt;
          Sign In here
        &lt;/button&gt;
      &lt;/div&gt;
    );
  };
  
  export default CoverInfo;</code></pre>
  </div>
  </div>
  </p>
  
  <p>video-cover.scss</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>video {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      z-index: 1;
  }
  
  .video-content {
      z-index: 2;
      position: absolute;
      background: rgba(0, 0, 0, 0.6);
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
  }
  
  .content {
      padding-top: 120px;
  }</code></pre>
  </div>
  </div>
  </p>