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 simpl
Overflow hidden can actually be ignored if the following rules are observed:
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/
Expanding on Piyas De:
an example
Do note, that if the overflow hidden has
position: relative
then it will not work
not working example
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...
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.
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/