title: ReactJS Material-UI how to fix a component on top of an anchored menu
body: <p>I'm using <a href="https://material-ui.com/components/menus/#max-height-menus" rel="nofollow noreferrer">Material-UI</a> and I'm trying to place a fixed component on top of an anchored menu, that is to say I have a button that I click and then a menu is displayed. I need to put a component on top of this menu and keep it visible all the time, something like this:</p>
  <p><a href="https://i.stack.imgur.com/oosHa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oosHa.png" alt="enter image description here" /></a></p>
  <p>but when I scroll down, the component scrolls too. I need to keep this visible despite the position of the scroll.</p>
  <p>These are the approaches I've been trying:</p>
  <pre><code>const renderMenu = () =&gt; {
      const items = [];
      for (let i = 0; i &lt; 20; i += 1) {
        items.push(`Item ${i + 1}`);
      }
      return (
        &lt;&gt;
          {&quot;Test one&quot;}               &lt;-----
          &lt;Menu
            id=&quot;simple-menu&quot;
            anchorEl={anchorEl}
            keepMounted
            PaperProps={{
              style: {
                maxHeight: &quot;200px&quot;
              }
            }}
            open={Boolean(anchorEl)}
            onClose={handleClose}
          &gt;
            {&quot;Test two&quot;}             &lt;-----
            {items.map((item) =&gt; (
              &lt;MenuItem onClick={handleClose}&gt;{item}&lt;/MenuItem&gt;
            ))}
          &lt;/Menu&gt;
        &lt;/&gt;
      );
    };
  
    return (
      &lt;&gt;
        &lt;Button
          aria-controls=&quot;simple-menu&quot;
          aria-haspopup=&quot;true&quot;
          onClick={handleClick}
          style={{ float: &quot;right&quot; }}
        &gt;
          Click on me
        &lt;/Button&gt;
        {anchorEl &amp;&amp; renderMenu()}
      &lt;/&gt;
    );
  </code></pre>
  <p><code>Test one</code> is displayed outside the popup and <code>Test two</code> scrolls away. <a href="https://codesandbox.io/s/material-demo-forked-4pso4?file=/demo.js" rel="nofollow noreferrer">Here</a> is a working codesandbox.</p>
  <p>Any idea on how to solve this?</p>