title: z-index not working with material ui reactjs | how can I show an element top?
body: <p>I want to show another <code>Box</code> component above <code>Modal</code> component. Both are material ui component.</p>
  <p>There is <code>Parent Box component</code> and there is another <code>Box component</code> inside <code>Parent Box component</code>.</p>
  <p>Thing I want to do is show the <code>second/child Box component</code> on the top.</p>
  <p>Right now it seems like the <code>second/child Box component</code> is under the image.</p>
  <p>You can click a <code>open modal</code> button and inspect modal.
  You will see there will be <code>&lt;img /&gt;</code>, <code>&lt;div&gt;&lt;/div&gt;</code> and <code>&lt;svg /&gt;</code></p>
  <p><code>&lt;div&gt;&lt;/div&gt;</code> should be <code>Box component</code> but I can't see it over the top.</p>
  <pre><code>  return (
      &lt;div&gt;
        &lt;Button onClick={handleOpen}&gt;Open modal&lt;/Button&gt;
        &lt;Modal
          open={open}
          onClose={handleClose}
          aria-labelledby=&quot;modal-modal-title&quot;
          aria-describedby=&quot;modal-modal-description&quot;
        &gt;
          &lt;Box  // parent Box component
            sx={{
              ...style,
              width: width,
              height: height
            }}
            className={classes.imageExpand}
          &gt;
            &lt;img
              src=&quot;https://cdn.pixabay.com/photo/2022/06/13/15/36/grain-7260250__340.jpg&quot;
              alt=&quot;sample&quot;
              className={classes.imageExpand}
            /&gt;
            &lt;Box className={classes.conainer} /&gt;  // child Box component
            &lt;CloseIcon className={classes.closeIcon} /&gt;
          &lt;/Box&gt;
        &lt;/Modal&gt;
      &lt;/div&gt;
    );
  </code></pre>
  <h3>Attempts</h3>
  <p>1, set <code>z-index:1000</code> and <code>position:'relative'</code></p>
  <p>2, set lower <code>z-index</code> to the parent component</p>
  <p>3, <code>z-index:'1000 !important'</code></p>
  <p>4, set <code>transform</code> and <code>opacity</code></p>
  <p>None of them worked. Is there any other way to show <code>&lt;Box /&gt;</code> top?</p>
  <p>I even tried to switch <code>Box component</code> to regular <code>div tag</code> and this also doesn't work.</p>