title: div with `position:fixed`, but stil have same behaviour as with `position:relative`
body: <p>When working with <code>position:fixed;</code> this is the expected result one would get:</p>
  
  <p><img src="https://i.stack.imgur.com/NMFAK.png" alt="enter image description here"></p>
  
  <p>What I actually want to achive is:</p>
  
  <p><img src="https://i.stack.imgur.com/iPub2.png" alt="enter image description here"></p>
  
  <p><strong>as in</strong> this result when working with two <code>position: relative;</code> elements</p>
  
  <p><img src="https://i.stack.imgur.com/8nqvs.png" alt="enter image description here"></p>
  
  <p>Don't get me wrong, I know how <code>position: fixed</code> or <code>position: absolute</code> works and should behave, how I haven't come around how to get both properties for the same div...</p>
  
  <p>One approach wich works, but isn't a satisfying solution is that I put a <code>position: relative</code> -div below my fixed element, not allowing the second element moving below the fixed element because it is already taken by the extra div.</p>
  
  <p><img src="https://i.stack.imgur.com/687Ve.png" alt="enter image description here"></p>
  
  <p>So I have tried to get this <em>second relative div</em> working with <code>:after</code> <strong>or</strong> <code>:before</code> pseudo-elements. This doesn't quite seem to work </p>
  
  <pre><code>div:after, div:before { position: relative; }
  </code></pre>
  
  <p>it somehow get's mixed up because the element itself is</p>
  
  <pre><code>div { position: fixed }
  </code></pre>
  
  <p>and turning <code>fixed</code> and <code>relative</code> around obviously also doesn't work because <code>fixed</code> will be bound to the <code>relative</code> - element.</p>
  
  <p>Any ideas?</p>
  
  <p>And if somebody is wondering why I need to use <code>fixed</code> and don't just go with <code>relative</code> : it's for scrolling reasons.</p>