title: CSS responsive absolute position between elements
body: <p>I will like to get help please with building a responsive design.
  <br/>The thing is that I don't know how to position elements as absolute but keep the same distance from top proportions between them.</p>
  
  <p>Here's a link to an example where you can resize the window width and see that the two elements are moving away from each other instead of always keep the same space between them from top.
  So what I'm looking for is to kind of faking scaling of the whole thing so it will only get smaller/larger but look always the same.</p>
  
  <p>How can I make the elements to go up and shrink the space from top when window resize please?</p>
  
  <p><a href="http://jsfiddle.net/QV6DR/" rel="noreferrer">http://jsfiddle.net/QV6DR/</a></p>
  
  <pre><code>.container {
      width: 100%;
      height: 1000px;
      position: relative;
      background: #eee;
  }
  
  .container div {
      height: 0;
      position: absolute;
      background: #ccc;
  }
  
  .elm1 {
      width: 20%;
      padding-bottom: 20%;
      top: 20%;
      left: 5%;
  }
  
  .elm2 {
      width: 30%;
      padding-bottom: 30%;
      top: 40%;
      right: 10%;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/KfhvX.png" alt="enter image description here"></p>