CODEWITHSUNDEEP
htmlcss
user1355300
user1355300

Reputation: 4987

Absolute position and overflow hidden in CSS

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/

Upvotes: 12

Views: 17008

Answers (3)

David Hariri
David Hariri

Reputation: 194

I don't think so... I think you should just put your element outside the container...

Put your element here instead

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

JsFiddle

Upvotes: 0

Michael Low
Michael Low

Reputation: 24506

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/

Upvotes: 6

Xareyo
Xareyo

Reputation: 1377

Slightly hacky, but this would work,

Adding an .inner-wrap inside your .wrap div

<div class="wrap">
    <div class="inner-wrap">

Then adding left-padding to the .wrap and shift the border down to .inner-wrap

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

DEMO

Upvotes: 2

Related Questions