Position <div> on top

I have an area on a pa开发者_JAVA技巧ge that uses with overflow. In side that div a have content with a few links and a few hidden divs. When a link is clicked, a hidden div is shown. In FF the div appears like intended: above everything else, in IE, however it appears above the content inside the div with overflow, but not above the overflow. How can I fix that?

Here's an example of my code:

<style>
.hiddenDiv {
    position:absolute;
    zIndex:9999;
    width:300px;
    height:250px;
    background:#fff;
    border:1px solid #ccc;
}
</style>
<div style="overflow-y: auto; border: 1px solid #ccc; height: 200px; width: 300px">
    some content here
    <div class="hiddenDiv" style="display:none">more content here</div>
</div>

i think this is some sort of IE specific issue.

This means your page is rendered in quirks mode..

Do you have a doctype declared in your page ?

example that works fine unless IE is put in quirks mode (then it exhibits the behavior you describe): http://www.jsfiddle.net/UtKYn/1/

Use:

* { zoom: 1; }

Though it's not advised to use the * selector, so try to narrow it down a little. Also, consider z-index

try to add

margin: 0px;
padding: 0px;

above code for the div that is indented.