Question

I wonder whether it’s totally impossible to bleed a nested div when the container is positioned relative and has overflow set to hidden?

Giving the nested div a fixed position is not an alternative in this case.

Please take a look at this example: http://jsfiddle.net/s7nhw/11/.

Anyone who knows how to do this?

I’ll appreciate any feedback!

<div class="container">
    <div class="nested-div"></div>
</div>

<style>
.container {
    margin: 0 auto;
    width: 100px;
    height: 100px;
    background: green;

    overflow: hidden;
    position: relative;
}
.nested-div {
    width: 200px;
    height: 100px;
    background: red;
    z-index: -1;

    position: absolute;
}
</style>

Answer 1

Absolute position child elements always remain under relative position parent element