Issue with z-index on element in a div with overflow hidden

Question

I have a strange issue with the z-index of an element not getting set even when I put a position:absolute on it. The parent element has overflow:hidden set.

TO see an example of what I mean:

Go to http://www.berrisforda.com/
On the job search tab there is a custom select/dropdown hover over it
Notice that it get cut off by the container, it actually extends below it but the container has overflow:hidden set

I am trying to set a z-index on it but haven't had any luck

Can anyone help please?

Jonathan Potter · Accepted Answer · 2013-03-09 23:03:52Z

5

In this case, z-index won't help you. If you have overflow:hidden on a parent element, any child outside of that element's bounding box will be hidden. You have three options:

Move the drop down element so that it is no longer a child of the overflow:hidden element.
Make the drop down list scroll.
Remove the overflow:hidden style.

answered Mar 9, 2013 at 23:03

Jonathan Potter

3,1111 gold badge26 silver badges19 bronze badges

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

Comments

klewis · Accepted Answer · 2013-03-09 23:14:11Z

1

Adjust the hieght on your .tab to be shorter...

ul#output li.tab {
position: absolute;
width: 684px;
height: 345px; /*see how I changed this value*/
background-color: #fff;
}

And remove overflow:hidden from #feature-list{}

And set the z-index:1 on .dropdown dd ul {}

Do the following step too to fix you footer....

Sorry Burt - I made a mistake initially - here is the final step

Remove position:relative and z-index from #footer

Then you should be good to go!

edited Mar 9, 2013 at 23:14

answered Mar 9, 2013 at 23:02

klewis

8,54816 gold badges70 silver badges113 bronze badges

Collectives™ on Stack Overflow

Issue with z-index on element in a div with overflow hidden

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related