CODEWITHSUNDEEP
css-positioncss
Marcos
Marcos

Reputation:

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

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

Upvotes: 1

Views: 8182

Answers (2)

avernet
avernet

Reputation: 31753

Using position: absolute instead of relative on that middle div will solve your problem. This gives you (with an added border color on the inner-most div):

alt text http://img.skitch.com/20100211-x8mnu5ds4exphbdbg956cuj6ea.png

And here is the updated source code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    </head>
    <body>
        <div style="overflow: auto; border: 1px solid">
            hello
            <div style="position: absolute; z-index: 99999">
                <div style="z-index: 99999; overflow-y: hidden; position: absolute; 
                        overflow: hidden; height: 200px; left: 0; auto: 0;
                        border: 1px solid red">
                    <ul>
                        <li >New</li>
                        <li >Old</li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>

For more on this, see Absolutely positioned box inside a box with overflow: auto or hidden.

Upvotes: 1

Derek Adair
Derek Adair

Reputation: 21925

first of all - Inline styling is a big no no.

It is best to include a style sheet and apply it to individual div's via the "id" or "class" attributes.

Please read up on standards compliant css at w3schools

The problem is your overflow property.

auto - "If overflow is clipped, a scroll-bar should be added to see the rest of the content"

What you are looking for is "overflow: visible;"

Upvotes: 1

Related Questions