title: Contain Text within Picture area using Position: relative;
body: <p>I'm trying to figure out how to use Position: relative in order to keep an object (let's call it text) in the same place on the screen regardless of screen size. </p>
  
  <p>When I use Position: relative, and set "left" to 30% for example... It's 30% of the screen. I'm trying to figure out how to put text on top of an image and set the text to be 30% left within the image. I need this to work regardless of the screen size. So far I have been unable. </p>
  
  <p>Could someone explain to me how Position Relative and Position Absolute work in these kinds of situations? Or how this would best be handled?</p>
  
  <p>Thanks!</p>
  
  <p>Here's my <a href="https://jsfiddle.net/y3h1ogms/1/" rel="nofollow">JsFiddle</a>, and here's the snippet</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.center {
    display: table;
    margin: 0 auto;
  }
  body {
    background-color: #27ae60;
  }
  .image {
    position: relative;
    width: 100%;
    /* for IE 6 */
  }
  .element {
    position: absolute;
    top: 100px;
    left: 30%;
    width: 100%;
    font-size: 45px;
    font-family: 'Just Me Again Down Here', cursive;
  }
  .input {
    /*color: blue;*/
    outline: none;
    border: none;
    background-color: transparent;
    position: absolute;
    top: 220px;
    left: 18%;
    width: 480px;
    height: 475px;
    overflow: hidden;
    font-size: 30px;
    font-family: 'Just Me Again Down Here', cursive;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img id='image' class='center' src='https://s13.postimg.org/li2l28a0n/White_Board.gif'&gt;
  
  
  &lt;h1 class='element'&gt;This is a header &lt;/h1&gt;
  &lt;textarea id='text1' class='input' placeholder="Write your answer here."&gt;&lt;/textarea&gt;</code></pre>
  </div>
  </div>
  </p>