How to implement z-index and overflow

I am trying show "popup" windows that appear when the user hovers the cursor over a div. Everything is working fine, except when I added a scrollbar to my div. The CSS code to show the scrollbar is something like:

.scroll-menu {
   max-height: 100px;
   overflow-x: hidden;
   overflow-y: scroll;
}

Here is an image before including the .scroll-menu class,

And here is an image after including the CSS class.

I found this article where the author says why z-index in my scenario: http://www.satya-weblog.com/2012/01/css-z-index-not-working.html

Now, my question is: How can I solve this issue? Is there any way to get working z-index and overflow?

Answers


This is not a z-index issue, but an overflow issue. Because you set the overflow to hidden any element visually sticking out of it's container, will be partially hidden - like in your screenshot. What you need to do is move your popup element outside of its container, the one that is set to overflow-x:hidden

so if your HTML currently looks like this:

<div class="scroll-menu">
    .... content ....
    <div class="popup"></div>
</div>

you want to change it to:

<div class="scroll-menu">
    .... content ....
</div>
<div class="popup"></div>

Need Your Help

output my javascript variable in a div

javascript html

i want to output the javascript dayz variable into the results div, but its not outputting anything, when i try alert(dayz) after the calculation it does, but i want it to output the dayz variable ...

Hibernate and Spring transactions - using private constructors/static factory methods

java hibernate spring transactions

We have a Hibernate/Spring application that have the following Spring beans: