title: how to make a sticky div be on top of other content
body: <p>i have a little css problem. i've got a div whit an input in it that will stick to the top of the page when page is scrolled down. it works great except images from the page get over it and it looks awfull. i need to make it "on top" of the other content if i can. or at least have an overflow of some sort that will push the scroll just from it, if that makes any sense.</p>
  
  <p>i have to say my css skills are below avarage. here's what ive got so far</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="searchbox" id="sticky" style="width:60%; padding-left:20%; background-color:white; padding-top:5px; margin-bottom:25px; padding-right:20%; height:35px;"&gt;
  &lt;form method="get"&gt;
  &lt;input style="width:80%;" name="title" placeholder="Search..." type="search"&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>the searchbox is not initially on the top of the page so to make it stick when it gets there i have this javascript that adds / removes position fixed</p>
  
  <p>Javascript:</p>
  
  <pre><code>&lt;script&gt;
  var header = document.querySelector('.searchbox');
  var origOffsetY = header.offsetTop;
  
  function onScroll(e) {
    window.scrollY &gt;= origOffsetY ? header.classList.add('sticky') :
                                    header.classList.remove('sticky');
  }
  
  document.addEventListener('scroll', onScroll);
  &lt;/script&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>&lt;style&gt;
  .sticky {
    position: fixed;
    top: 0;
  }
  &lt;/style&gt;
  </code></pre>