title: MUI Card text overlay
body: <p>I'm using the MUI <code>Card</code> and <code>CardMedia</code> components in my app but can't figure out how to overlay text on top of the image. This is a simplified example of what I'm trying:</p>
  <pre><code>&lt;Card&gt;
     &lt;CardMedia image={this.props.preview} style={styles.media}/&gt;
     &lt;div style={styles.overlay}&gt;
        this text should overlay the image
     &lt;/div&gt;
  &lt;/Card&gt;
  
  
  const styles = {
     media: {
        height: 0,
        paddingTop: '56.25%' // 16:9
     },
     overlay: {
        position: 'relative',
        top: '20px',
        left: '20px',
        color: 'black',
        backgroundColor: 'white'
     }
  }
  </code></pre>
  <p>I've tried placing the text div in above the <code>CardMedia</code>, below it, inside it, outside the Card entirely, and using different position values but can't figure this out at all. The beta versions of MUI included an overlay property on the <code>CardMedia</code>, but the v1 library doesn't seem to have anything like that.</p>
  <p>Any know how to properly do this? Thanks in advance for any help!</p>