title: How to implement z-index and overflow
body: <p>I am trying show "popup" windows that appear when the user hovers the cursor over a <code>div</code>. Everything is working fine, except when I added a scrollbar to my <code>div</code>. The CSS code to show the scrollbar is something like:</p>
  
  <pre><code>.scroll-menu {
     max-height: 100px;
     overflow-x: hidden;
     overflow-y: scroll;
  }
  </code></pre>
  
  <p>Here is an image before including the <code>.scroll-menu</code> class,
  <img src="https://i.stack.imgur.com/CtcHa.png" alt="no using scrollbar"></p>
  
  <p>And here  is an image after including the CSS class.</p>
  
  <p><img src="https://i.stack.imgur.com/TMEFC.png" alt="using scrollbar"></p>
  
  <p>I found this article where the author says why z-index in my scenario:
  <a href="http://www.satya-weblog.com/2012/01/css-z-index-not-working.html" rel="nofollow noreferrer">http://www.satya-weblog.com/2012/01/css-z-index-not-working.html</a></p>
  
  <p>Now, my question is:
      How can I solve this issue?
      Is there any way to get working z-index and overflow?</p>