title: position:sticky does not leave parent
body: <p>How can make an element sticky, so it stays at the top of the viewport? I want the element to remain sticky even if it leaves it's container.</p>
  
  <p>I tried this</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="page"&gt;
    &lt;div class="parent"&gt;
      &lt;div class="child-sticky"&gt;
        &lt;p&gt;i want to be sticky, even when I'm outside my parent.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.child-sticky {
    position:sticky;
    top:20px;
  }
  
  .page {
    height: 3000px;
  }
  </code></pre>
  
  <p>Here's a pen to illustrate the problem. Scroll down to see what I mean.</p>
  
  <p><a href="https://codepen.io/pwkip/pen/OxeMao" rel="noreferrer">https://codepen.io/pwkip/pen/OxeMao</a></p>