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

Question

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:

However, with the code below, I get:

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:

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:

#d1 {
  overflow: hidden;
  background: #efe;
  padding: 5px;
  width: 125px;
}

#d2 {
  position: relative;
  background: #fee;
  padding: 2px;
  width: 100px;
  height: 100px;
}

#d3 {
  position: absolute;
  top: 10px;
  background: #eef;
  padding: 2px;
  width: 75px;
  height: 150px;
}

<br/><br/><br/>
<div id="d1" >
  <div id="d2" >
    <div id="d3"></div>
  </div>
</div>

Clarification: So you want the blue box (the inner-most div) to be able to overflow out of the green box (the outer-most div) but keep overflow hidden on the green box? So basically, have overflow hidden on everything in the green box EXCEPT the blue box, is that right? — Anthony, Feb 11 '10 at 09:15
Anthony, yes, this is exactly it. And I don't care about what happens to the red box (#2), which is just there to influence the top/right on the blue box (#3). — avernet, Feb 11 '10 at 18:36
+1 for properly explaining a question that I thought was too hard to explain but really wanted an answer to. — Andrew Mao, Aug 03 '13 at 04:37
`position: fixed` will ignore the `overflow:hidden` of any containing element. — Kevin Beal, Jul 15 '15 at 18:38

score 57 · Accepted Answer · edited May 18 '22 at 12:51

57

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:

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>

edited May 18 '22 at 12:51

MaxiGui

6,190
4
16
33

answered Feb 11 '10 at 18:33

avernet

30,895
44
126
163

6

i actually used `position: static` and that worked better for me – Jason Jun 24 '10 at 20:25
@Jason, very interesting; so you're saying that you use `position: static` on box #2 instead of `position: absolute`. – avernet Jun 25 '10 at 03:37
THANKS! position: absolute worked like a charm. Jason: it didn't work with static – fractalbit Dec 31 '10 at 04:05
Setting the container (#2) to static worked for me in IE 10, FF, and Chrome. – nthpixel May 21 '13 at 18:51
1

Can you elaborate why `absolute` doesn't clip but `relative` does? – Andrew Mao Aug 03 '13 at 05:13
It cluttered up my markup, but only slightly, and more importantly, IT WORKED, thanks! – Jason Oct 14 '13 at 14:55
Just to clarify, we need to put #box1 { height: 100px }, otherwise the example could be misleading. – windmaomao Jun 12 '17 at 14:05
1

This solution will not work unless you make everything between #1 and #3 to be absolute. Practically speaking, this is impossible. – windmaomao Jun 12 '17 at 14:21
What if you don't want box#3 to be positioned relatively to box#2? IE, I want box#3 to be positioned relatively to box#1, but I want it to be visible or not based on box#2's `overflow:hidden`? – CGriffin Oct 31 '17 at 20:54
5

Wondering what's the purpose to explain something SO visual using colors like that... – ed1nh0 Nov 06 '18 at 16:43

score 7 · Answer 2 · answered Feb 11 '10 at 09:19

There's no magical solution of displaying something outside an overflow hidden container.

A similar effect can be achieved by having an absolute positioned div that matches the size of its parent by positioning it inside your current relative container (the div you don't wish to clip should be outside this div):

#1 .mask {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  overflow: hidden;
}

Take in mind that if you only have to clip content on the x axis (which appears to be your case, as you only have set the div's width), you can use overflow-x: hidden.

score 0 · Answer 3 · answered Feb 11 '10 at 09:14

I don't really see a way to do this as-is. I think you might need to remove the overflow:hidden from div#1 and add another div within div#1 (ie as a sibling to div#2) to hold your unspecified 'content' and add the overflow:hidden to that instead. I don't think that overflow can be (or should be able to be) over-ridden.

score 0 · Answer 4 · answered Feb 11 '10 at 09:21

If there is other content not being shown inside the outer-div (the green box), why not have that content wrapped inside another div, let's call it "content". Have overflow hidden on this new inner-div, but keep overflow visible on the green box.

The only catch is that you will then have to mess around to make sure that the content div doesn't interfere with the positioning of the red box, but it sounds like you should be able to fix that with little headache.

<div id="1" background: #efe; padding: 5px; width: 125px">
    <div id="content" style="overflow: hidden;">
    </div>
    <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>

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

4 Answers4

Linked