Position absolute and overflow hidden

Question

We have two DIVs, one embedded in the other. If the outer DIV is not positioned absolute then the inner DIV, which is positioned absolute, does not obey the overflow hidden of the outer DIV.

#first {
    width: 200px;
    height: 200px;
    background-color: green;
    overflow: hidden;
}

#second {
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
    left: 250px;
    top: 250px;
}

<div id="first">
    <div id="second"></div>
    <div id="third"></div>
</div>

Is there any chance to make the inner DIV obey the overflow hidden of the outer DIV without setting the outer DIV to position absolute (cause that will muck up our complete layout)? Also position relative for our inner DIV isn't an option as we need to "grow out" of a table TD.

#first {
    width: 200px;
    height: 200px;
    background-color: green;
}

#second {
    width: 50px;
    height: 400px;
    background-color: red;
    position: relative;
    left: 0px;
    top: 0px;
}

<table id="first">
    <tr>
        <td>
            <div id="second"></div>
        </td>
    </tr>
</table>

Are there any other options?

score 362 · Accepted Answer · edited Oct 08 '13 at 12:40

362

Make outer <div> to position: relative and inner <div> to position: absolute. It should work for you.

edited Oct 08 '13 at 12:40

totymedli

29,531
22
131
165

answered Jan 05 '11 at 15:27

shankhan

6,343
2
19
22

6

Thanks to you both. I always thought position:relative is the default. I just learned that static is the default. I accept shankhans answer as both answers are equivalent and shankhan needs some more points ;-) – medihack Jan 05 '11 at 15:38
17

Some explanation and/or documentation would be a great addition. – showdev Nov 06 '15 at 19:41
FYI : Of course, you need to put overflow:hidden on position:relative div – Joffrey Outtier May 04 '23 at 08:40

score 31 · Answer 2 · answered Jan 05 '11 at 15:27

31

What about position: relative for the outer div? In the example that hides the inner one. It also won't move it in its layout since you don't specify a top or left.

answered Jan 05 '11 at 15:27

Tesserex

17,166
5
66
106

score 24 · Answer 3 · answered May 17 '18 at 09:54

An absolutely positioned element is actually positioned regarding a relative parent, or the nearest found relative parent. So the element with overflow: hidden should be between relative and absolute positioned elements:

<div class="relative-parent">
  <div class="hiding-parent">
    <div class="child"></div>
  </div>
</div>

.relative-parent {
  position:relative;
}
.hiding-parent {
  overflow:hidden;
}
.child {
  position:absolute; 
}

score 2 · Answer 4 · answered Sep 14 '21 at 02:08

Make sure.

parent position relative.
parent have manually assigned width and height(important as child element having absolute position).
child position absolute;

.outer{
   position:relative;
   width:200px; 
   height:100px;
   overflow:hidden;
}

.inner{
   position:absolute;
   width:100px;
   height:100px;
   font-size:3rem;
}

<div class="outer">
<div class=inner>
Inner DIV to apply overflw hidden
</div>
</div>

}

score 0 · Answer 5 · answered Jul 13 '23 at 23:59

0

Ran into this issue with a radial background gradient. If the above solutions clip parts of your element, just apply the position relative to the html body instead of a direct parent.

body {
  position: relative;
  overflow-x: hidden;
}

answered Jul 13 '23 at 23:59

Tom

1,610
1
15
19

score -4 · Answer 6 · edited May 04 '13 at 16:11

You just make divs like this:

<div style="width:100px; height: 100px; border:1px solid; overflow:hidden; ">
    <br/>
    <div style="position:inherit; width: 200px; height:200px; background:yellow;">
        <br/>
        <div style="position:absolute; width: 500px; height:50px; background:Pink; z-index: 99;">
            <br/>
        </div>
    </div>
</div>

I hope this code will help you :)

Position absolute and overflow hidden

6 Answers6

Linked

Related