title: Adding text over image in ReactJS by relative height and width
body: <p>I am trying the following code using HTML and CSS:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;style&gt;
  .container {
    position: relative;
    text-align: center;
    color: white;
  }
  
  
  .top-asad {
  color: blue;
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;h2&gt;Image Text&lt;/h2&gt;
  &lt;p&gt;How to place text over an image:&lt;/p&gt;
  
  &lt;div class="container"&gt;
    &lt;img src="http://www.pngall.com/wp-content/uploads/2016/05/Trollface.png" alt="Snow" style="width:100%;"&gt;  
    &lt;div class="top-asad"&gt;Top Left&lt;/div&gt;  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>I am trying to convert the above code to ReactJS using the following:</p>
  
  <pre><code>import React from "react"
  import CardMedia from '@material-ui/core/CardMedia';
  import { withStyles } from '@material-ui/core/styles';
  import CardActionArea from '@material-ui/core/CardActionArea';
  import { Card, CardContent } from "@material-ui/core";
  
  const styles = theme =&gt; ({
      card: {
          display: 'flex',
        },
        details: {
          display: 'flex',
          flexDirection: 'column',
        },
        content: {
          flex: '1 0 auto',
        },
        cover: {
          width: 151,
        },
        controls: {
          display: 'flex',
          alignItems: 'center',
          paddingLeft: theme.spacing.unit,
          paddingBottom: theme.spacing.unit,
        },
        container: {
          position: 'relative',
          textAlign: 'center',
          color: 'white',
        },
        topasad: {
          color: 'blue',
            position: 'absolute',
            top: '10%',
            left: '50%',
          },
  
      media: {
          display: 'flex',
          height: 100,
          objectFit: 'contain',
          alignItems: 'left',
  
      },
    })
  
  function Header(props) {
      const { classes } = props;
      return (  
              &lt;Card className={classes.card}&gt;
                  &lt;div className={classes.con}&gt;
                      &lt;CardContent className={classes.content}&gt;
                          &lt;CardMedia
                              component="img"
                              className={classes.media}
                              image="http://www.pngall.com/wp-content/uploads/2016/05/Trollface.png"
                          /&gt;
  
  
                      &lt;/CardContent&gt;
  
                  &lt;/div&gt;                
              &lt;/Card&gt;        
      )
  }
  
  // export default Header
  export default withStyles(styles)(Header);
  </code></pre>
  
  <p>But I have been unable to place the text on top center of image as I have done using basic HTML and CSS. Can someone please help, please note that I am using relative position while placing text in my working HTML and CSS codes?</p>
  
  <p>Edit:
  I am doing this as a learning exercise. I am seeking an answer using ReactJS and MaterialUI</p>