title: Transparent background scrollbar displays on top of content
body: <p>I want to achieve this:<br>
  <a href="https://i.stack.imgur.com/wMs5s.png" rel="noreferrer"><img src="https://i.stack.imgur.com/wMs5s.png" alt="enter image description here"></a><br>
  What I already achieve:<br><a href="https://plnkr.co/edit/a3XfJo6Fxtru9V5zpVYR?p=preview" rel="noreferrer">https://plnkr.co/edit/a3XfJo6Fxtru9V5zpVYR?p=preview</a><br>
  <a href="https://i.stack.imgur.com/W6JBF.png" rel="noreferrer"><img src="https://i.stack.imgur.com/W6JBF.png" alt="enter image description here"></a></p>
  
  <pre><code>.dropdown-menu { //container
      overflow-y: overlay;
      background-color: transparent;
  }
  .dropdown-menu::-webkit-scrollbar {
      width:10px;
  }
  .dropdown-menu::-webkit-scrollbar * {
      background:transparent;
  }
  .dropdown-menu::-webkit-scrollbar-thumb {
      background:$blue !important;
      border-radius: 6px;
  }
  </code></pre>
  
  <p>Does someone have any ideas how I can do that? How can I make the items stay between their container and the container's scrollbar so they looks like the design? 
  I tried putting z-index in the elements but seems not to work.</p>