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


Tags: css,overflow,position,relative

Problem :

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

However, with the code below, I get:

alt text

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

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:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <body>
        <br/><br/><br/>
        <div id="1" style="overflow: hidden; background: #efe; padding: 5px; width: 125px">
            <div id="2" style="position: relative; background: #fee; padding: 2px; width: 100px; height: 100px">
                <div id="3" style="position: absolute; top: 10px; background: #eef; padding: 2px; width: 75px; height: 150px"/>
            </div>
        </div>
    </body>
</html>


Solution :

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

And here is the full code with this change:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <style type="text/css">

            /* Positioning */
            #box1 { overflow: hidden }
            #box2 { position: absolute }
            #box3 { position: absolute; top: 10px }

            /* Styling */
            #box1 { background: #efe; padding: 5px; width: 125px }
            #box2 { background: #fee; padding: 2px; width: 100px; height: 100px }
            #box3 { background: #eef; padding: 2px; width: 75px; height: 150px }

        </style>
    </head>
    <body>
        <br/><br/><br/>
        <div id="box1">
            <div id="box2">
                <div id="box3"/>
            </div>
        </div>
    </body>
</html>

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


    CSS Howto..

    How can I force a css flex child to be the only on its row?

    How to make a div fill the entire page height using css? [closed]

    How to use CSS on HTML made by TextEdit?

    How to hide p1 within div

    Foundation CSS Framework, how to change triangle on accodion

    how do i change image width in jCarousel?

    How is box-shadow returned in IE9?

    How do I get a div that appears on hover to overlap all others, without using absolute positioning?

    How to write regex to extract specific key format and value from CSS file?

    How can I add a transition effect when opening my custom modal window?

    How to reference another selector in css

    DOM How to add two divs (with jQuery inside them) next to each other?

    How can I change color of visited cgridview row?

    How do you add a css class (Bootstrap) to a select field with a loop inside in Rails?

    Image title both alingn. How to make each element aligned vertically?

    CSS: how to make a list item containing a form “submittable”?

    how to achieve this effect with css html?

    How can I create facebook style vertical border line (layout)? :)

    How to perfectly center a “plus” sign in a circle using CSS

    How can I get two form fields side-by-side, with each field’s label above the field, in CSS?

    how to check css is valid for IE8

    How to add a css to a view in the Controler?

    How to Make Text Hovering Area not a Full Line?

    How to remove all css classes of all items of a
    with jQuery?

    How do I inspect CSS pseudo classes with firebug?

    How to add links to tabbing order when they're made visible with CSS?

    How to make an Image overlay the site on click?

    How to change or call svg clippath polygon attributes in CSS

    iOS How to access Library in CSS Url's?

    How to create 'greater than' arrow using CSS only?