title: CSS Top Relative To Screen
body: <p>I have a problem where I have multiple elements that match the background image's position. When the window size is changed(especially going very small) then the elements' "top" values don't stay constant. This small issue builds up and 10 elements later everything is totally wrong. Play around with the window size (try making it very small) to easily see the problem.</p>
  
  <p>How can I fix this problem and keep them matching the background all the time?</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
          &lt;style&gt;
              html, body {
                  margin: 0;
              }
      
              div {
                  min-width: 100%;
                  min-height: 100%;  
                  background-image: url("https://i.imgur.com/EX2L8y6.jpg");
                  background-size: 100%, 100%;
                  background-repeat: no-repeat;
                  position: absolute;
              }
      
              .TheBtn {
                  position: relative;
                  background-color: red;
                  opacity: 0.5;
                  height: 4.4vw;
                  width: 22.2vw;
                  left: 19vw;
                  top: 10.8vw;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div&gt;
              &lt;button class="TheBtn"&gt;&lt;/button&gt;
          &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>