title: Using CSS position absolute, relative and z-index for 2 images which are responsive (not fixed) in size
body: <p>I am trying to overlay 2 images but they both need to be responsive in height and size (i.e. the parent DIV is not a fixed size (specifically a play button over a thumbnail).</p>
  
  <p>Example...</p>
  
  <pre><code>&lt;div class="img-wrap"&gt;
     &lt;div class="play-button"&gt;Play Button Img&lt;/div&gt;
     &lt;div class="thumb-image"&gt;Thumbnail Video Image&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Normally I would set height, width and position relative on .img-wrap and then set position absolute and z-index of .play-button and .thumb-image to allow the play button image to sit nicely over the thumbnail.</p>
  
  <p>The problem I have is the thumbnail is responsive so I am unable to set the height and width of .img-wrap. I can still sett he z-index OK but without setting a height everything below is despairing underneath it.</p>
  
  <p>Is there is a fix to this?</p>