title: How can I make an element sticky relative to the window without JavaScript (If Possible)?
body: <p>I've been loving <code>position: sticky</code>. It solves most, if not all, of the issues without resorting to JavaScript. But, I've hit a wall. I need to make an element that is nested inside a couple of <code>&lt;div&gt;</code> to be sticky. We know that <code>position: sticky</code> works as a blend of <code>position: relative</code> and <code>position: fixed</code>, therefore it will anchor to its first parent.</p>
  
  <p>From <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position#sticky" rel="nofollow noreferrer">MDN</a>:</p>
  
  <blockquote>
    <p>The element is positioned according to the normal flow of the
    document, and then offset relative to its nearest scrolling ancestor
    and containing block (nearest block-level ancestor)</p>
  </blockquote>
  
  <p>In this case, I want to make a header sticky relative to the window and not the container. The HTML makes it difficult for me to restructure it outside nested <code>&lt;div&gt;</code></p>
  
  <p>Is this possible without JavaScript? </p>
  
  <p>Here's the code:</p>
  
  <pre><code>&lt;div class="attendance"&gt;
  &lt;!-- Here's the header I want to make sticky to the window, and not to div.attendance--&gt;
      &lt;header class="text-center sticky"&gt;Monday 11/22/2019&lt;/header&gt;
  &lt;!-- Header above --&gt;
      &lt;div class="date-config"&gt;
          &lt;div class="form-group"&gt;
              &lt;input type="checkbox" id="workable" /&gt; No Work&lt;br /&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;label for="notes"&gt;Notes:&lt;/label&gt;
              &lt;textarea id="notes" class="form-control"&gt;&lt;/textarea&gt;
          &lt;/div&gt;
          &lt;label for="markall"&gt;Mark all as&gt;
          &lt;select id="markall" class="form-control"&gt;
              &lt;option&gt;&lt;/option&gt;
              &lt;option&gt;Absent&lt;/option&gt;
              &lt;option&gt;Present&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  
      &lt;div class="student-attendance"&gt;
        Hello :)   
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Any ideas?</p>
  
  <p>P.S: I've found <a href="https://stackoverflow.com/a/17494943/1057052">this</a>, but it uses JavaScript. </p>
  
  <p><strong>Edit:</strong>
  <a href="https://jsfiddle.net/superjose/qsmeL0vk/" rel="nofollow noreferrer">Here's an awful, but working example</a> (Beware! It's in Spanish - Look for the dates! They won't stick to the window!). </p>