Extending position absolute div outside overflow hidden div

Question

I've haven't done css in several month so I might miss something simple, but whatever the solution is, I couldn't figure it out. So here is the problem.

Here is simplified version of my code:

<div id="wrapper" style="position: fixed; overflow: hidden; height: 100%; width: 200px;">
  <div id="test" style="position: absolute; margin-left: -200px;"></div>
</div>

So basically, I need the inner div test to extend 200px to the left, outside of outer div wrapper. The problem is that my wrapper is overflow:hidden and it won't allow to go outside. I need it to stay overflow:hidden though, due to some js plugin I am using.

So is there any workarounds? Thanks

Sawbuck

Can you share your code (or elaborate on the js plugin)? – Valladolid

Sorry, could't figure out at first – Sawbuck

@Valladolid the plugin is niceScroll areaaperta.com/nicescroll – Sawbuck

Answer 1

Only option is to move that div outside of the overflow:hidden div. You can't say hide everything in this div that overflows -- except for this one div... let's make an exception.

You can introduce one more layer in your hierarchy, whereby the inner div is overflow hidden and the outer div is not. Then place that positioned element in the outer div. A pseudo example would be:

<div class="outer">
  <div class="inner" style="overflow: hidden;">
    ....
  </div>

  <div class="abs-positioned">
  </div>
</div>

If by chance you had positioning on the old div with overflow:hidden, you would move that setting to the outer div, allowing things to position properly.

So the short answer: no solution will allow you to do what you want without either changing your CSS to not be overflow:hidden or without changing your markup.

Dudleyduds

Hmm, the reason I am trying to achieve that its because I have a <ul> inside my wrapper with many elements. And each element was supposed to have position relative with absolute positioned divs inside them. Not sure if I could explain... What I am saying is I can't take the absolute divs outside those lists... – Sawbuck

Unfortunately those are your only two options -- change the overflow CSS rule, or change the markup to get around it. Sorry! – Dudleyduds

The padding solution described is interesting, but it will also allow other elements to overflow into that padding area. If that's ok, then consider it. https://mcmap.net/q/491637/-extending-position-absolute-div-outside-overflow-hidden-div – Dudleyduds

Answer 2

Expanding on Piyas De:

an example

Do note, that if the overflow hidden has

position: relative

then it will not work

not working example

Drypoint

The best answer – Binetta

Answer 3

Overflow hidden can actually be ignored if the following rules are observed:

• The overflowing child element has absolute positioning
• The parent with overflow hidden has static positioning
• A second parent wrapper with relative positioning is added

HTML

<div class="outer-wrapper">
  <div class="wrapper">
    <div class="overflowed">(Overflowing the wrapper)</div>
  </div>
</div>

CSS

.outer-wrapper {
  position: relative;
}
.wrapper {
  overflow: hidden;
}
.overflowed {
  position: absolute;
}

FIDDLE http://jsfiddle.net/vLsmmrz6/

Deianira

Did you mean "A second parent wrapper with relative positioning is NOT added"? check this: jsfiddle.net/4pjz5srk/2 – Fivespot

Answer 4

Something like -

<div id="textChange" style="overflow:hidden; padding-left:250px;">This is wrapper Div
This is wrapper Div<br/>
This is wrapper Div<br/>
<div id="textChange1" style="position:absolute;left:50; top: 50;">
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
</div>
This is wrapper Div<br/>
This is wrapper Div<br/>
This is wrapper Div<br/>
</div>

May solve your problem.

See..whether it helps or not...

Apprehend

Answer 5

Here's a fix that does not requires Javascript or moving anything. Just add a Parent wrapper with the width and height of #wrapper.

<div id="parent_wrapper" style="width:200px">
  <div id="wrapper" style="position: absolute; overflow: hidden; height: 100%; width: 300px;">
    <div id="test" style="position: absolute; margin-left:200px;">Test</div>
  </div>
</div>

Please also see my live example: http://jsfiddle.net/ovjdqj4o/

Landtag