title: Div position fixed with respect to another div
body: <p>I have the following html code:</p>
  
  <pre><code>&lt;div data-role="content"&gt;
      &lt;div class="container"&gt;
          &lt;div class="child"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the following css</p>
  
  <pre><code>.container{
      width:310px;
      height:224px;
      position:relative;
      background-image:url(../images/background_1.jpg);
     background-size:contain;
  }
  .child{
      width:125px;
      height:125px;
      postion:absolute;
      top:100px;
      left:50px;
      background-image:url(../images/child.png);
      background-size:contain;
  }
  </code></pre>
  
  <p>I want the child div to stay at a fixed position with respect to its parent, but the child div does not move. </p>