jquery slideDown position not ontop of content

Question

on the following test website: http://gruebe-neu.marknolan.ch/#section-3

under the section 3 there is a timeline slider. its a pdf archive. when you hover over the timeline file icon, jquery slideDown kicks in should present an overlay. but no matter what z-index or positioning i try, i can't get the slideDown be ontop of the other content.

i'm not sure its a matter of z-index - might be an overflow issue?

the elements are boxed in as follows:

<ul>
<li>Text / Icon <div>Overlay Content</div></li>
</ul>

Answer 1

Remove overflow: hidden from caroufredsel_wrapper (inline-css). The slideDowns start 2px above the bottom of caroufredsel_wrapper, so you see only 2px of the slideDown. If you remove the overflow: hidden;, also the content what is under the bottom of the wrapper will be visible.

If the inline css is generated from some js and you don't want to change it, you can also put this in your css file:

.caroufredsel_wrapper { overflow: visible !important; }

Answer 2

I think the problem is the height of your outer div container (.caroufredsel_wrapper) - increase the height and everything should work as expected :-)