Absolute position and overflow hidden in CSS

Question

I have set overflow:hidden for a container. I want to set absolute position for an element which is inside the container so that it is displayed outside the container, however overflow hidden is not letting it display.

It is important for me to use the overflow:hidden for the container, as I have lots of elements in the container. Is there anyway to make it work with the overflow:hidden?

The parent element of the wrap is the body tag and its hard to decide position according to that.

HTML:

<div class="wrap">
    <div class="box">
        <span>Left</span>
        <div class="main"></div>
    </div>    
</div>

CSS:

.wrap{
    width: 500px;
    margin: 50px auto;
    border: 1px solid green;
    overflow: hidden;    /*causes the problem */
}

.box{
    position: relative
}

.main{
    width: 100px;
    height: 100px;
    background: green;
}

span{
    position: absolute;
    left: -50px;
}

Demo: http://jsfiddle.net/c55hS/

Answer 1

As others have said it's not directly possible. There is a kind of workaround without having to change markup though - remove position:relative from .box, don't set left and top on the absolutely positioned element, but use negative margins to position the element where you want it instead.

It's necessary to remove position:relative from .box, because with it span is absolutely positioned relative to .box and so can't escape the overflow:hidden confines. Without it, it becomes absolutely positioned relative to the body and can then overlay .box using the negative margins.

It's critical not to set top, bottom, left or right though - this will cause it to be positioned the set distance from the body. If you don't set anything though (all auto), it's displayed in the correct inline position.

.wrap{
    width: 500px;
    margin: 50px auto;
    border: 1px solid green;
}

.box{

}

.main{
    width: 100px;
    height: 100px;
    background: green;
}

span{
    position: absolute;
    background:red;
    margin-left:-50px;
}

http://jsfiddle.net/c55hS/5/