title: Material-UI - How to render something on top of the AppBar?
body: <p>I'm developing a React web app using the Material-UI framework. I've now come to a point where I want to render something on top of the AppBar, but from a different file.</p>
  <p>My app is structured like this:</p>
  <p>Main.js - contains the AppBar and react-router</p>
  <p>Various views or &quot;pages&quot; which are loaded by react-router as children of Main.js</p>
  <p>Various components that are rendered by these pages.</p>
  <p>You can see what I'm trying to achieve below.</p>
  <p><a href="https://i.stack.imgur.com/iVSym.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iVSym.jpg" alt="Diagram of what I'm trying to achieve:" /></a></p>
  <p>If it helps, here is the code for the AppBar, note; I have also tried with &quot;static&quot; position.</p>
  <pre><code>&lt;AppBar position=&quot;fixed&quot;&gt;
                  &lt;Toolbar&gt;
                      &lt;IconButton
                          edge=&quot;start&quot;
                          className={classes.menuButton}
                          color=&quot;inherit&quot;
                          aria-label=&quot;menu&quot;
                          onClick={handleClick}&gt;
                          &lt;MenuIcon/&gt;
                      &lt;/IconButton&gt;
                      &lt;Typography variant=&quot;h4&quot; className={classes.title}&gt;
                        &lt;Link href=&quot;/&quot; variant=&quot;h4&quot; color=&quot;inherit&quot;&gt;Site Name&lt;/Link&gt;
                      &lt;/Typography&gt;
                  &lt;/Toolbar&gt;
                  &lt;div&gt;
                      &lt;Menu
                          id=&quot;Menu&quot;
                          anchorEl={anchorEl}
                          keepMounted
                          open={Boolean(anchorEl)}
                          onClose={handleClose}&gt;
                          &lt;MenuItem onClick={handleClose}&gt;
                          // SOME MENU ITEM
                          &lt;/MenuItem&gt;
                      &lt;/Menu&gt;
                  &lt;/div&gt;
              &lt;/AppBar&gt;
  </code></pre>
  <p>And the page where I am trying to render the widget. For now I am just using a Typography component as a placeholder. My understanding is that I need to set the Z index of the div that this widget is wrapped in to elevate it, however, I assume that it is only relative to other components within this view, and not also the AppBar as that is coming from elsewhere?</p>
  <pre><code>&lt;div&gt;
              &lt;div
                  style={{
                  height: 20,
                  backgroundColor: &quot;yellow&quot;,
                  position: &quot;relative&quot;,
                  zIndex: 10
              }}&gt;
                  &lt;Typography component=&quot;h3&quot; variant=&quot;h3&quot;&gt;Widget Placeholder&lt;/Typography&gt;
              &lt;/div&gt;
  
              &lt;Toolbar&gt;&lt;/Toolbar&gt; // Empty toolbar is used to push all the other content down below the AppBar when it's position is set to fixed
  // other content from this page
  &lt;/div&gt;  
  </code></pre>
  <p>Code sandbox: <a href="https://codesandbox.io/s/goofy-feather-cf1kd?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/goofy-feather-cf1kd?file=/src/App.js</a></p>
  <p>Thanks :)</p>