title: Pin and Unpin elements using only CSS
body: <p>I've been using <code>position: fixed;</code> to pin elements on screen, but as soon as I unpin them, they disappear from the screen(after being scrolled to few lines) and appear at the beginning of the document.</p>
  
  <p><strong><em>For example:</em></strong>
  <br>If the element is unpinned at 5th line, it should stay at 5th line of the document, but it jumps back to the top regardless of position from where it was unpinned.</p>
  
  <p>I've been pinning and unpinning as,</p>
  
  <pre><code>.pinned {
    position: fixed;
  }
  
  .unpinned {
    position: relative;
  }
  </code></pre>
  
  <p>Link to <a href="http://codepen.io/snazzysanoj/pen/XXgYZY" rel="nofollow">CodePen</a>.</p>
  
  <p>So, Is there any way I could set the position of the element(upon unpinning) to the <strong><em>position from which it has been unpinned</em></strong> using CSS alone(or minimal JS if not possible using pure CSS)?</p>
  
  <p>P.S. I tried using <code>absolute</code>, <code>relative</code>, and also <code>static</code> while unpinning, but none seems to work.</p>