Getting rid of scroll bar for position: absolute inside of position:relative inside of overflow:auto

Posted by Marcos on Stack Overflow See other posts from Stack Overflow or by Marcos
Published on 2009-07-19T16:47:39Z Indexed on 2010/05/08 8:08 UTC
Read the original article Hit count: 546

Hey guys, my first question here on stack overflow. Trying to get something pretty simple to work, I'm sure I'm missing something quite obvious. Still getting used to the "standard" css, too many years working with non-functional ones! Heh.

So, sample of what I'm doing:

<div style="overflow: auto; border: 1px solid">
    hello
    <div style="position: relative; z-index: 99999; top: 0px; left: 0px;">
        <div style="z-index: 99999; overflow-y: hidden; position: absolute; overflow: hidden; height: 200px; left: 0; auto: 0">
            <ul>
                <li >New</li>
                <li >Old</li>
            </ul>
        </div>
    </div>
</div>

In essence: The first div is a container, that I would like to automatically overflow as content is added. Inside of that container, I have a popup menu, which I have simplified here. The popup menu appears (as it should) directly under "hello".

My problem, however, is that instead of the popup menu "coming out" of the parent, as would be expected by the absolute position, it is actually causing a scrollbar to appear on the parent.

I know that if I take otu the "position: relative" it works, but then it no longer appars where I want it (directly under the previous element).

What am I missing here?

EDIT: Sample here: http://marcos.metx.net/OverflowTest.htm

© Stack Overflow or respective owner

Related posts about relativepositioning

Related posts about absolute-positioning