title: How to make sticky to grandparent element?
body: <p>I know that position:sticky makes the element sticky to its direct parent. But is it somehow still possible to make it sticky to its grandparent?</p>
  
  <p>Here i have tried to create a jsfiddle:</p>
  
  <p><a href="https://jsfiddle.net/n3ozx2rL/6/" rel="nofollow noreferrer">https://jsfiddle.net/n3ozx2rL/6/</a></p>
  
  <p>I want both my search-bar and the firstsection stick to the whole page (.content). And at the end after some scrolling i would like to have sth. like this:</p>
  
  <p><a href="https://i.stack.imgur.com/rMecp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rMecp.png" alt="enter image description here"></a></p>
  
  <p>At the moment, the firstsection keeps its stickiness since it is the direct child of content. But not the seasrch-bar, which stays sticky just within its direct parent "header". </p>
  
  <p>Here is the code again since SO asks for it:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.content {
    height: 1000px;
    background-color: yellow;
    padding: 20px;
  }
  
  .header {
    height: 100px;
    background-color: orange;
    margin-bottom: 10px;
  }
  
  .search-bar {
    padding: 5px;
    position: sticky;
    top: 0;
  }
  
  .firstsection {
    height: 50px;
    background-color: green;
    margin-bottom: 10px;
    position: sticky;
    top: 0;
  }
  
  .secondsection {
    height: 300px;
    background-color: blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="content"&gt;
    &lt;header class="header"&gt;
      &lt;div class="search-bar"&gt;
        &lt;input&gt;
        &lt;input&gt;
      &lt;/div&gt;
    &lt;/header&gt;
  
    &lt;section class="firstsection"&gt;
      &lt;textarea&gt;&lt;/textarea&gt;
    &lt;/section&gt;
  
    &lt;section class="secondsection"&gt;
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
      eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
      nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
    &lt;/section&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>