title: How to fix position of the element relative to window size
body: <p>I have a single image (a checkmark) on the page and I want to fix its position when the user resizes the browser or go fullscreen.  </p>
  
  <p>As you can see here the image is moving around the page when I try to resize the browser:(image is the checkmark)</p>
  
  <p><a href="https://i.stack.imgur.com/HmK2x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HmK2x.png" alt="enter image description here"></a></p>
  
  <p>And when I resize the browser again:
  <a href="https://i.stack.imgur.com/X1iEI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X1iEI.png" alt="enter image description here"></a></p>
  
  <p>The desired result is to fix the position of the image <strong>like that play button in the middle of the page</strong> that moves relative to the window.</p>
  
  <p>Here is  the CSS of the image:</p>
  
  <p>Note: I need those viewport units for some complicated reason! and the absolute positioning is prefered.</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-css lang-css prettyprint-override"><code>#Image{
    position: absolute;
    max-width:10%; 
    height: auto;
    opacity: 1;
    top: 78vh;
    left:26.5vw;
    z-index: 1000;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img id="Image" src="https://round-arm-authority.000webhostapp.com/test/Changed.png"/&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Update:</strong> using this seems to work fine but the image resizes Non-proportional:</p>
  
  <pre><code>#correctImage{
    position: absolute;
    transform: scale(0.2, 0.2); 
    height: 100vh; 
    width: 100vw;
    opacity: 1;
    z-index: 1000;
  }
  </code></pre>
  
  <p><strong>Update 2:</strong> Here is the link to download the zip files to test the code in the browser (Chrome is preferred). The HTML code to modify is in <code>story_html5.html</code> lines 22 - 27 and the CSS code is in <code>correctImageStyle.css</code>.</p>
  
  <p>The desired behavior is just resizing and repositioning of the checkmark image like the play button in the center of the page.</p>
  
  <p><a href="http://s6.picofile.com/d/8381556034/1ef7bc07-eea8-4e9e-8bd8-57214a1e7ef8/Untitled1_Storyline_output.zip" rel="nofollow noreferrer">http://s6.picofile.com/d/8381556034/1ef7bc07-eea8-4e9e-8bd8-57214a1e7ef8/Untitled1_Storyline_output.zip</a></p>