Absolute positioned div does not show outside the relative positioned div

Question

Please look at the following example

http://jsfiddle.net/GANeX/90/

I want to show my green colored div outside the wrapper. I cannot change the positioning of the wrapper div as inner-wrapper also holds some other content which may come out when we change the position:relative to position:static.

How can I do this?

Solution

You can wrap the things you don't want to overflow in an element with a class called dont-overflow. Set the width of that class to the current .wrapper width, and then remove the overflow from the parent and add it to that class:

CSS dont-overflow class:

.dont-overflow
{
    overflow-x: hidden;
    overflow-y: scroll;
    width: 200px;
    height: 200px;
}

HTML:

<div class='wrapper'>
    <div class='inner-wrapper'>
         <div class='content-wrapper'></div>
         <div class='dont-overflow'>
             <div class='content-wrapper'></div>
             <div class='content-wrapper'></div>
             <div class='content-wrapper'></div>
         </div>
    </div>
 </div>

http://jsfiddle.net/GANeX/97/

Comments

[Josh Powell]

-1 because the wrapper has an overflow-x:hidden; and overflow-y:scroll;. If you edit your answer I will remove -1.

[Jayant Varshney]

Thanks Alex! but.. Need overflow over wrapper.. :P

[Alex W]

@JayantVarshney Can you explain the need for overflow? What you are asking is impossible if you can't change any of your CSS or HTML