ansaurus

Question

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

Answer 1

A:

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;"

Derek Adair 2010-01-28 15:56:28

The `overflow: auto` is needed here. I think what the original author wants is to have scrollbars, but doesn't want the `div position: absolute` to be taken out of the flow because it has a `position: absolute`. And in fact this is what would happen if the container didn't have a `position: relative`.

Alessandro Vernet 2010-02-11 08:29:58

Answer 2

+1 A:

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

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.

Alessandro Vernet 2010-02-11 18:45:19

ansaurus

tags:

views:

answers:

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

related questions