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 browsers to print background images in CSS?

    how to apply css in angular.js

    how to make a left aligned navigation with dropdown elements

    How to make DIVs flow to the left in a x-scrollable pane with CSS?

    How to create a relative inline style?

    How do I make a class/div behave like it were floating?

    Ajax control toolkit combobox showing weird bullets in dropdown

    How do you select a radio button in css?

    How to expand wrapper when content is more?(with CSS)

    How can I make a fix positioned menu bar?

    How to expire cached pages when only the CSS url changes

    How to make H1 tag responsive in Avada WordPress theme using CSS

    Want to override Bootstrap, but how to avoid the use of !important?

    How to find an element using Watir by inline css styles

    How to split multiple string using jQuery or javascript?

    How to hide submenu until it is hovered over by mouse

    How can I use dropdowns in a masonry layout?

    How prevent Conflict between two $(this) in jquery?

    How to place an image properly with CSS

    How to change the color of table rows once ng-repeat executed

    how can i get these buttons side by side in the top right corner?

    How to squash a div vertically and keep element below 100% on screen

    CSS Media Queries: How to make the right column display above the left on small screens?

    How can I conditionally change css styles with js?

    How to use this CSS font technique?

    CSS How to display an image in the size of a / text line

    How to change CSS (background-image) from JQuery in Rails?

    jQuery/CSS - How to style the first occurrence of an element inside of another element?

    How can I use external HTML form in Joomla site?

    How to use CSS with javascript