react-modal is rendered at bottom of the screen

Question

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).

This is my custom modal:

import Modal from 'react-modal';

var SimpleModal = React.createClass({
    render() {
        return (
                <Modal
                    isOpen={this.props.isOpen}
                    className="modal-content"    
                    contentLabel="modal"
                    onRequestClose={this.props.onClose} >
                    <h1 className="modal-header">{this.props.title}</h1>
                    <div className="modal-body">
                        <p>{this.props.message}</p>
                    </div>

                    <Button bsStyle={this.props.type} className="modal-button" onClick={this.props.closeModal}>Close</Button>

                </Modal>
        )
    }
});

const mapStateToProps = (state) => {
    return {
        isOpen: state.modals.notification.isOpen,
        type: state.modals.notification.type,
        title: state.modals.notification.title,
        message: state.modals.notification.message,
    }
};

const mapDispatchToProps = (dispatch) => {
    return {
        closeModal: () => dispatch(skjeraActionCreators.closeNotificationModal()),
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(SimpleModal)

The SimpleModal component is included in the render function of my top level container (AppContainer), like this:

render() {
        return (
            <div>
                <SimpleModal />
                <App
                    onLogout={this.logout}
                    isLoggedIn={this.props.isLoggedIn}
                    username={this.props.username}
                    subpages={this.props.children}
                />
            </div>   
       )  
    }

Note that I haven't tweaked the style/css, so it uses the default styling, and thus the default positioning scheme.

Can anyone help me out tracking down this bug? Any help will be appreciated.

EDIT: This is the CSS entries (probably some redudant elements there) I've referred to in my 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;
}