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>

overflow-x: hidden;

I believe this line may be causing your issue, since you're telling the containing div to truncate anything beyond it's borders.


Need Your Help

Why won't Cufon allow an addclass function with jQuery?

javascript jquery cufon font-replacement

Man, I just don't get it. I have four sets of paired links, where by hovering over one sets off the other. I have it working in jQuery but when I add Cufon it's no dice. Here's JQ script:

Python record audio on detected sound

python audio raspberry-pi

I am looking to have a python script run in the background and use pyaudio to record sound files when the threshold of the microphone has reached a certain point. This is for a monitor on a two way...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.