title: HTML/CSS: Using position absolute to stick to the side, when there is a horizontal scrollbar
body: <p>I have a <strong>div</strong> that needs to stick to the right side of the page. I have accomplished this using <strong>position:absolute</strong>, and setting the <strong>right</strong> and <strong>top</strong> attributes.</p>
  
  <p>It looks something like this:
  <img src="https://i.imgur.com/mwWpcXj.jpg" alt="Img 1"></p>
  
  <p>Now this solution is great! But today, we ran into some problems.
  If the screen is so small that it creates a horizontal scrollbar, this will happen (Pay attention to the scrollbar at the bottom if you dont understand the problem :) ):
  <img src="https://i.imgur.com/6R8tzUB.jpg" alt="Img 2">
  <img src="https://i.imgur.com/CL4nF7v.jpg" alt="Img 3"></p>
  
  <p>It is sticking to the right side of the window instead of the document - which would actually be okay, but unfourtantly as soon as you move the scrollbar, you'll see that it only sticks to the <strong>intially loaded</strong> window..</p>
  
  <p>So I need the div to stick to the right side of the document, rather than the window..</p>
  
  <p>I cannot use fixed. Can anyone see a solution for this? I feel lost.</p>
  
  <p>Here is an <a href="http://jsfiddle.net/zq8hjt7j/1/" rel="nofollow noreferrer">Jsfiddle Example</a></p>
  
  <pre><code>&lt;div style="background-color:red;
  width:50px;
  height:100px;
  position:absolute;
  top:20px;
  right:0%;"&gt;
      test
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>A jQuery/JavaScript solution is welcome! Aslong as its not a massive library :)</strong></p>