title: Responsive absolute positioning with 2 images
body: <p>I have an image of a football field with 11 zones(left endzone, right endzone, and zones 0-9.  I also have an image of a football that I'd like to be able to absolutely place in any of these desired 11 zones, and have the ball and field be responsively sized (it will be used on tablet, desktop, and mobile).  I'm also using bootstrap, but for now I've taken that variable out so I can attempt to get it working with my own CSS/HTML.</p>
  <p><a href="https://i.stack.imgur.com/eIJNv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eIJNv.png" alt="enter image description here" /></a></p>
  <p>I can get it to absolutely position the ball on top of the field and I can get the field to reduce in size appropriately, but the ball stays the same size.  Furthermore, as the screen size shrinks, the position of the ball gets out of whack.  I suspect this is due to the fact that I'm using px units for left/top values.  I've tried getting it to work with percentages (left:10%, top:50%, etc) but it seemed to ignore the left/top when I did so.</p>
  <p>I've also tried setting the width and height of the field-container and it respects the percentage, but then it ceases to be responsive.  I'm a back-end dev learning CSS and I'm sure I just missed some crucial but simple aspect of positioning and responsiveness.  I'd rather not resort to some hacky solution where I chop the image into sections which brings its own host of problems.</p>
  <p>Is this something better handled with media queries?</p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;div class='field-container'&gt;
    &lt;img src='https://i.imgur.com/R4nJuCS.png' class='field' /&gt;
    &lt;img src='https://i.imgur.com/OFUsjLJ.png' class='ball' /&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>CSS</strong></p>
  <pre><code>.field-container {
    position:relative;
    width:1000px;
    height:200px;
    /* add this to test responsiveness */
    /* width:400px; */
  }
  .field {
    position:absolute;
    max-width: 100%;
    height: auto;
  }
  .ball {
    position:absolute;
    top:50%;
  }
  </code></pre>
  <p>Here is my code-pen:
  <a href="https://codepen.io/tjans79/pen/ZEWqjQb" rel="nofollow noreferrer">https://codepen.io/tjans79/pen/ZEWqjQb</a></p>