CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container

Spread the love

Question Description

I have 3 levels of div:

  • (In green below) A top level div with overflow: hidden. This is because I want some content (not shown here) inside that box to cropped if it exceeds the size of the box.
  • (In red below) Inside this, I have div with position: relative. The only use for this is for the next level.
  • (In blue below) Finally a div I take out of the flow with position: absolute but that I want positioned relative to the red div (not to the page).

I’d like to have the blue box be taken out of the flow and expand beyond the green box, but be positioned relative to the red box as in:

alt text http://img.skitch.com/20100211-2iejd2t9iabxb2rgs9b6msht2.png

However, with the code below, I get:

alt text http://img.skitch.com/20100211-mfjtr1st2yy5u4jhc3chi1qi3d.png

And removing the position: relative on the red box, now the blue box is allowed to get out of the green box, but is not positioned anymore relative to the red box:

alt text http://img.skitch.com/20100211-e96ktg4j9undir396m4p5ka3ki.png

Is there a way to:

  • Keep the overflow: hidden on the green box.
  • Have the blue box expand beyond the green box and be positioned relative to red box?

The full source, with inline CSS for the sake of testing:


    
        


Practice As Follows

A trick that works is to position box #2 with position: absolute instead of position: relative. We usually put a position: relative on an outer box (here box #2) when we want an inner box (here box #3) with position: absolute to be positioned relative to the outer box. But remember: for box #3 to be positioned relative to box #2, box #2 just need to be positioned. With this change, we get:
alt text http://img.skitch.com/20100211-k9ksqaq4a46cpfjasitf1h4ayx.png

And here is the full code with this change:


    
        
    
    
        


I added more details about this on Absolutely positioned box inside a box with overflow: auto or hidden.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.