title: Apply z-index to div overflow (scrollbar)
body: <p>I have a div with horizontal scrollbar and an image (or other div) over entire page (with position absolute). The prolem is I want to be able to scroll the div which is beside the image. For <code>a</code> links I positioned them relative and applied z-index. <strong>How can I apply <code>z-index</code> only for div's scrollbar? So, I want the div to be behind the image.</strong></p>
  
  <p><strong>Screenshoot Example:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/enoGr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/enoGr.png" alt="Black lines are an image with position absolute over the page."></a></p>
  
  <p><strong>Visual Example:</strong></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-html lang-html prettyprint-override"><code>&lt;div style="overflow-x: scroll; overflow-y: hidden; width: 300px; height: 130px; white-space: nowrap;"&gt;
              s sd ds fsd fs df s fs fds fsd fsd fsd fds f sdf sd fs fsd f sdf sd f sdf sd f sdf ds fsdf sf ds f sdf dsf sdf s df sdf sdf ds fsd fsdf sd fds 
              &lt;br/&gt;fsd fds f sd fsd fsd fds fs df sd f sd fds f sd f sdf sd f ds fsdf s df sd fs df sdfsd f 
              &lt;br/&gt;sdf ds f sdf sd f dsf sd fds f ds fs df sd fds f ds f sd fs df sd fsdfs df sdf sd fs df sd fsd 
              &lt;br/&gt;sdf ds f sdf sd f dsf sd fds f ds fs df sd fds f ds f sd fs df sd fsdfs df sdf sd fs df sd fsd 
              &lt;br/&gt;sdf ds f sdf sd f dsf sd fds f ds fs df sd fds f ds f sd fs df sd fsdfs df sdf sd fs df sd fsd 
  &lt;/div&gt;
  &lt;div style="position: absolute; top: 0px; left: 0px;"&gt;
              &lt;img src="http://www.wabmo.com/Album/watermark/watermarks/Sample-trans.png" width="300"/&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you!</p>