title: Using sticky position with absolute together
body: <p>I have this code</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>#wrapper {position: relative;}
  
  #content {padding-top: 100px;}
  
  #search {position: absolute; /*position: sticky; position: -webkit-sticky;*/ top: 0; left: 40%; height: 100px; background: red; width: 20%;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
      &lt;div id="content"&gt;
          content&lt;br&gt;content&lt;br&gt;content&lt;br&gt;content&lt;br&gt;content&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;content
      &lt;/div&gt;
  
      &lt;div id="sibebar"&gt;...&lt;/div&gt;
  
      &lt;div id="footer"&gt;...&lt;/div&gt;
      
      &lt;div id="search"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I need to have <code>#search</code> element in the code <strong>after</strong> #content element, positioned absolutely to the top. After scrolling I need to fix search element at the top of the page.</p>
  <p>Any ideas?</p>
  <p>I've tried to add <code>#search_wrap</code> with absolute position and <code>#search</code> with sticky position, it didn't work.</p>
  <p>Thanks.</p>