Extending position absolute div outside overflow hidden div

css, css-position, html, overflow

Solution

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.

Problem

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

Original source