title: Scrollbar renders above absolute positioned element for horizontally scrolling container beneath element
body: <p>I'm working on a React application that includes a horizontally scrolling view and a popover on the same page. I noticed a bug when testing in Chrome, where the scrollbar of the horizontally scrolling view is rendering on top of the popover I've placed, despite the popover having an absolute position. I've narrowed down the problem to a simplified example. Here's a screenshot of the issue on Chrome:</p>
  
  <p><a href="https://i.stack.imgur.com/kYHdr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kYHdr.png" alt="Scrollbar rendering above popover for horizontally scrolling container beneath popover"></a></p>
  
  <p>I have tried the following:</p>
  
  <ul>
  <li>Setting the container to have a relative position and adjusting the z indices of both the container and the popover.</li>
  <li>Adjusting the <code>overflow</code> property on the container. </li>
  </ul>
  
  <p>Here is a simplified HTML example I put together that demonstrates the issue.</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;html&gt;
  &lt;head&gt;
      &lt;style type="text/css"&gt;
          body {
              overflow: hidden;
              position: relative;
          }
  
          .container {
              width: 1000px;
              height: 50px;
              overflow: scroll;
              white-space: nowrap;
          }
  
          .popover {
              width: 200px;
              height: 200px;
              top: 0;
              left: 100px;
              background-color: teal;
              position: absolute;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container"&gt;
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  &lt;/div&gt;
  &lt;div class="popover"&gt;
      Hi!
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have also put this into a <a href="https://jsfiddle.net/hzbL3pmk/" rel="nofollow noreferrer">JSFiddle</a>.</p>
  
  <p>I expected the scrollbar to render behind the popover. Instead, it renders on top of the popover.</p>
  
  <p>I should note that the expected behavior occurs on Firefox. Both Chrome and Safari are exhibiting the issue. (I'm on a Mac.)</p>
  
  <p>Does anyone know how to get the scrollbar to render behind the popover on Chrome and Safari? I would prefer a CSS solution, but as the original problem is occurring in a larger React application, I could also use some JavaScript to fix the issue.</p>