title: react-bootstrap displaces the other content in React JS application
body: <p>I have created s sample react bootstrap modal box, basically same code as at:- <a href="http://react-bootstrap.github.io/components.html#modals-live" rel="nofollow">http://react-bootstrap.github.io/components.html#modals-live</a>. The model is its own component which I have added to another component as child. Modal comes up fine but it displaces rest of the content that exists on that page, when it should appear on top of the page. Not sure what I might be doing wrong. The parent component is as below:-</p>
  
  <pre><code>&lt;div className="detail-sctions"&gt;
      &lt;TestModal closeModel = {this.closeTestModal.bind(this)} showModal={this.state.showModel}/&gt;
  
        &lt;ul className="tabs nav-backs"&gt;
            &lt;li className="tab-title nav-backs"&gt;&lt;button onClick={}&gt;tab1&lt;/button&gt;&lt;/li&gt;
            &lt;li className="tab-title nav-backs active"&gt;&lt;button&gt;tab1&lt;/button&gt;&lt;/li&gt;
            &lt;li className="tab-title nav-backs"&gt;&lt;button&gt;tab3&lt;/button&gt;&lt;/li&gt;
            &lt;li className="tab-title nav-backs"&gt;&lt;button onClick={}&gt;tab4&lt;/button&gt;&lt;/li&gt;
            &lt;li className="tab-title nav-backs"&gt;&lt;button&gt;tab5&lt;/button&gt;&lt;/li&gt;
        &lt;/ul&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>here TestModal is the sample code from that link.</p>