How to implement z-index and overflow

Question

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, no using scrollbar

And here is an image after including the CSS class.

using scrollbar

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?

if possible provide us fiddle link

Pandiyan Cool
– Pandiyan Cool

2013-12-09 16:39:42 +00:00
Commented Dec 9, 2013 at 16:39 — Pandiyan Cool
– Pandiyan Cool, Commented Dec 9, 2013 at 16:39
I would say to remove overflow-x: hidden;

Brewal
– Brewal

2013-12-09 16:40:02 +00:00
Commented Dec 9, 2013 at 16:40 — Brewal
– Brewal, Commented Dec 9, 2013 at 16:40

Darko · Accepted Answer · 2013-12-09 16:41:48Z

4

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>

answered Dec 9, 2013 at 16:41

Darko

39k15 gold badges85 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rolando Over a year ago

yes, this is a good way to solve it. The bad news (for me) is that i am using durandarl/widget in order to show this popup (where every element in my list has a "popup" widget associated to it. I think the only way to solve my issue is add some kind of pagination to my list and forget it this "scrollbar". Your answer was very useful since now i know that i don't have any chance with overflow and z-index.

Donovan · Accepted Answer · 2013-12-09 16:41:56Z

0

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.

answered Dec 9, 2013 at 16:41

Donovan

15.9k4 gold badges25 silver badges34 bronze badges

1 Comment

Alexandre Adereyko Over a year ago

it doesn't delete overflow-x while overflow-y is set

Collectives™ on Stack Overflow

How to implement z-index and overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related