Can overflow: hidden; be used to hide unpositioned content but still reveal positioned content?

First of all, take a look at this: http://jsfiddle.net/Udvgm/

HTML:

<div id="container">
    <div id="tooWide">
        <p>This is just way too wide! We should clip it.</p>
    </div>
    <div id="relativeParent">
        <div id="absoluteChild">
            <p>text</p>
        </div>
    </div>
</div>
<div id="container2">
    <p>This is some text which should be overlapped.</p>
</div>

CSS:

#container {
    background: grey;
    width: 450px;
}
#relativeParent{
    height: 40px;
    width: 400px;
    position: relative;
    background: green;
}

#absoluteChild{
    position: absolute;
    width: 100px;
    height: 60px;
    top: 0px;
    left: 10px;
    z-index: 2;
    background: blue;
}
#tooWide {
    background: red;
    width: 600px;
}

I am wondering if it is possible for the blue box (#absoluteChild) to overflow outside the grey box (#container), but the overflo开发者_运维百科wing parts of the red box (#tooWide) to be hidden.

Before you suggest it, using overflow: hidden; overflow-y: visible; (or overflow-x: hidden; overflow: visible;) causes the browser to throw in some unwanted scrollbars.

Unfortunately, it's not possible in your circumstances.

Before you suggest it, using overflow: hidden; overflow-y: visible; (or overflow-x: hidden; overflow: visible;) causes the browser to throw in some unwanted scrollbars.

From the spec:

The computed values of overflow-x and overflow-y are the same as their specified values, except that some combinations with visible are not possible: if one is specified as visible and the other is scroll or auto, then visible is set to auto.

A helpful page with examples and a better explanation: http://www.brunildo.org/test/Overflowxy2.html

When you have a block with overflow: hidden and a block with position: absolute inside of it, until block with overflow and all parents of absolute positioned block have position: static, the absolute positioned block won't be hidden.

I don't know that you want to do with your code, but if you want to position some block from the block with overflow, you can move positioning context outside of the block with overflow, so absolute positioned block would be visible and could be positioned around.

Here is a fiddle: http://jsfiddle.net/kizu/Udvgm/3/