title: react-modal is rendered at bottom of the screen
body: <p>I'm using react-modal in my app, but I can't easily get it to render on top of the current screen content. The modal always renders at the bottom of the screen (below the html body even). </p>
  
  <p>This is my custom modal:</p>
  
  <pre><code>import Modal from 'react-modal';
  
  var SimpleModal = React.createClass({
      render() {
          return (
                  &lt;Modal
                      isOpen={this.props.isOpen}
                      className="modal-content"    
                      contentLabel="modal"
                      onRequestClose={this.props.onClose} &gt;
                      &lt;h1 className="modal-header"&gt;{this.props.title}&lt;/h1&gt;
                      &lt;div className="modal-body"&gt;
                          &lt;p&gt;{this.props.message}&lt;/p&gt;
                      &lt;/div&gt;
  
                      &lt;Button bsStyle={this.props.type} className="modal-button" onClick={this.props.closeModal}&gt;Close&lt;/Button&gt;
  
                  &lt;/Modal&gt;
          )
      }
  });
  
  const mapStateToProps = (state) =&gt; {
      return {
          isOpen: state.modals.notification.isOpen,
          type: state.modals.notification.type,
          title: state.modals.notification.title,
          message: state.modals.notification.message,
      }
  };
  
  const mapDispatchToProps = (dispatch) =&gt; {
      return {
          closeModal: () =&gt; dispatch(skjeraActionCreators.closeNotificationModal()),
      }
  };
  
  export default connect(mapStateToProps, mapDispatchToProps)(SimpleModal)
  </code></pre>
  
  <p>The SimpleModal component is included in the render function of my top level container (AppContainer), like this:</p>
  
  <pre><code>render() {
          return (
              &lt;div&gt;
                  &lt;SimpleModal /&gt;
                  &lt;App
                      onLogout={this.logout}
                      isLoggedIn={this.props.isLoggedIn}
                      username={this.props.username}
                      subpages={this.props.children}
                  /&gt;
              &lt;/div&gt;   
         )  
      }
  </code></pre>
  
  <p>Note that I haven't tweaked the style/css, so it uses the default styling, and thus the default positioning scheme. </p>
  
  <p>Can anyone help me out tracking down this bug? Any help will be appreciated. </p>
  
  <p>EDIT: This is the CSS entries (probably some redudant elements there) I've referred to in my code:</p>
  
  <pre><code>.modal-header {
      background-color: inherit;
      border: none;
  }
  
  .modal-body {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  
  .modal-button {
      padding-left: 10%;
      margin-left: 20px;
  }
  .modal-content {
      position: absolute;
      background-color: white;
      color: black;
      top: auto;
      bottom: auto;
      overflow: auto;
      right: auto;
      left: 10px;
      border-radius: 20px;
      outline: none;
      border: solid;
      border-width: medium;
      border-color: black;
      padding-bottom: 10px;
  }
  </code></pre>