title: How to display a ::after pseudo-element over all the elements on the page when its parent has a vertical scrollbar?
body: <p>When I use <code>overflow-y: scroll</code> on a <code>div</code>, then its children <code>div</code>s <code>::after</code> elements are displayed under some element. When I don't use <code>overflow-y: scroll</code> everything looks perfect except the scrollbar is no longer displayed.</p>
  
  <p>I've already tried "z-index" on the <code>::after</code> elements, but it doesn't change anything.</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>#servers-cont {
    flex: 0 0 120px;
  }
  
  /* Uncomment to display the scrollbar, but then ".server-circle:hover:after" is not completely visible */
  /*
  #servers-cont {
    overflow-y: scroll;
  }
  */
  
  .server-circle {
    background: blue !important;
    width: 90px;
    height: 90px;
  }
  
  .server-circle:hover {
    background: red !important;
  }
  
  .server-circle:hover:after {
    content: "AAAAAAAAAAAA";
    position: absolute;
    left: 80px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"&gt;
  &lt;/head&gt;
  
  &lt;div class="row" id="all-conts"&gt;
    &lt;div class="col" id="servers-cont"&gt;
      &lt;div class="server-circle" data-name="a"&gt;&lt;/div&gt;
      &lt;br&gt;
      &lt;div class="server-circle"&gt;&lt;/div&gt;
      &lt;div class="server-circle"&gt;&lt;/div&gt;
      &lt;div class="server-circle"&gt;&lt;/div&gt;
      &lt;div class="server-circle"&gt;&lt;/div&gt;
      &lt;div class="server-circle"&gt;&lt;/div&gt;
      &lt;div class="server-circle"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://codepen.io/VeryKnave/pen/oNvJqxN?editors=1000" rel="nofollow noreferrer">CodePen link</a></p>
  
  <p>I expect that the "::after" elements to be completely visible when <code>#servers-cont {overflow-y: scroll}</code>.</p>