title: Z-Index on Popper menu?
body: <p>I have a working example reproducing this issue <a href="https://codesandbox.io/s/rl97oo800o" rel="nofollow noreferrer">on codesandbox.io</a>.</p>
  <p>What I'm trying to do is do the 'sit below' menu as <a href="https://v4.mui.com/components/menus/#menulist-composition" rel="nofollow noreferrer">demonstrated on the Material-UI documentation.</a></p>
  <pre><code>   return (
        &lt;div className={classes.root}&gt;
          &lt;div&gt;
            &lt;Button
              buttonRef={node =&gt; {
                this.anchorEl = node;
              }}
              aria-owns={open ? &quot;menu-list-grow&quot; : null}
              aria-haspopup=&quot;true&quot;
              onClick={this.handleToggle}
            &gt;
              Toggle Menu Grow
            &lt;/Button&gt;
            &lt;Popper open={open} anchorEl={this.anchorEl} transition disablePortal&gt;
              {({ TransitionProps, placement }) =&gt; (
                &lt;Grow
                  {...TransitionProps}
                  id=&quot;menu-list-grow&quot;
                  style={{
                    transformOrigin:
                      placement === &quot;bottom&quot; ? &quot;center top&quot; : &quot;center bottom&quot;
                  }}
                &gt;
                  &lt;Paper&gt;
                    &lt;ClickAwayListener onClickAway={this.handleClose}&gt;
                      &lt;MenuList&gt;
                        &lt;MenuItem onClick={this.handleClose}&gt;Profile&lt;/MenuItem&gt;
                        &lt;MenuItem onClick={this.handleClose}&gt;My account&lt;/MenuItem&gt;
                        &lt;MenuItem onClick={this.handleClose}&gt;Logout&lt;/MenuItem&gt;
                      &lt;/MenuList&gt;
                    &lt;/ClickAwayListener&gt;
                  &lt;/Paper&gt;
                &lt;/Grow&gt;
              )}
            &lt;/Popper&gt;
          &lt;/div&gt;
  
          &lt;Button color=&quot;default&quot; variant=&quot;contained&quot;&gt;
            {&quot; &quot;}
            I'm a button that sits under the menu
          &lt;/Button&gt;
        &lt;/div&gt;
      );
  </code></pre>
  <p>The issue I have here is that the Button further down the DOM, from the menu is always on top.</p>
  <p>I've tried manually adding <code>zIndex</code> to various parts of the menu - but to no avail.</p>
  <p>I suspect that the issue is something to do with the transition.</p>
  <p>Can someone explain what's going on here, and how would I solve it?</p>