title: Make an object stick to the top-right side of the page
body: <p>I added the famous "Fork me on Github" ribbon to one of my projects. The tag looks like this:</p>
  
  <pre><code>&lt;a href="https://github.com/Nurdok/htmlify"&gt;
      &lt;img style="position: absolute; top: 0; right: 0; border: 0;"
       src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" 
       alt="Fork me on GitHub"&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>It looks great, but some of the <code>div</code>s on my webpage have minimum length, so when the window is small, one has to horizontally scroll the screen. When that happens, I want the "Fork me on Github" link to stick to the top-right side of the <em>page</em>, not the window. This is how it looks right now:</p>
  
  <p>Scrolled all the way to the left:<br>
  <img src="https://i.stack.imgur.com/guaKM.png" alt="enter image description here"></p>
  
  <p>Scrolled all the way to the right:<br>
  <img src="https://i.stack.imgur.com/XZcty.png" alt="enter image description here"></p>
  
  <p>It seems that the ribbon is placed on the top-right side of the initial window, and stays static.
  What I want is for it to be out of sight in the first case and top-right in the second case (when I scroll to the right).</p>
  
  <p><strong>Edit</strong>: Thanks for the quick answers, people. However, most of the answers made the ribbon scroll horizontally and vertically with the page. What I want is for it to be fixed on the top-right side of the page (<em>not</em> the browser view), and only be seen if I scroll to where its position is.</p>