title: How can I render my popup component over a Container or Div instead of below to it
body: <p>Currently my popup component 'Category' is showing below to my Container Div.</p>
  <p>My rendering component to the ui</p>
  <pre><code> return (
      &lt;div style={{ margin: 80, marginLeft: 30, marginRight: 30 }}&gt;
        &lt;Container&gt;
          &lt;Row&gt;
            &lt;Col lg={6} md={8}&gt;
              &lt;h3 className=&quot;headLine&quot;&gt;Curated Food Categories&lt;/h3&gt;
            &lt;/Col&gt;
            &lt;Col lg={2} md={1}&gt;&lt;/Col&gt;
            &lt;Col lg={4} md={3}&gt;
              &lt;div style={{ textAlign: &quot;right&quot; }}&gt;
                &lt;Button onClick={() =&gt; setCategoryBtn(true)} className=&quot;categoryBtn&quot;&gt;Add Category &lt;/Button&gt;
              &lt;/div&gt;
            &lt;/Col&gt;
          &lt;/Row&gt;
          &lt;hr style={{ backgroundColor: &quot;transparent&quot; }} /&gt;
          &lt;Row&gt;
            &lt;Col&gt;
              &lt;TableContainer
                style={{ boxShadow: &quot;none&quot;, borderRadius: &quot;10px&quot; }}
                component={Paper}
              &gt;
           ...
              &lt;/TableContainer&gt;
            &lt;/Col&gt;
          &lt;/Row&gt;
        &lt;/Container&gt;
  </code></pre>
  <p>Category component which I'm trying to popup over the container</p>
  <pre><code>    &lt;Category trigger={categoryBtn} setTrigger={setCategoryBtn}&gt;
       &lt;h3&gt;Pop up screen&lt;/h3&gt;
      &lt;/Category&gt;
  </code></pre>