How do I allow absolute positioned elements to hang outside of an overflow:hidden container?

Author: zeel
Message:

Some visual improvement, and it now tries really hard to avoid having the menu clip at the edge of the window. I need a solution though for creatures that are very simple (horse, commoner, newly created character), because the menu is just taller than the sheet period. I don’t really want to sacrifice the ability for simple blocks to be super compact though.

Author: vance

Message:

<@!398134675002097666> I would just make the popups not be inside the overflow hidden frame of the element, either by moving the menu outside the dom tree of the container with overflow or by absolute positioning them outside of a relative parent

Author: zeel

Message:

The issue I’m having is that the container of the Application itself clips the menu. What did you do in that image?

Author: vance

Message:

in this case I did so by setting position: absolute and removing position:relative from the parent elements

Author: zeel

Message:

The absolute positioned elements are no longer relative to their own parents in that case though.

Author: vance

Message:

yes generally in such cases I position them with js

Author: zeel

Message:

That’s a mess, the parents can move around a lot.

Author: vance

Message:

https://stackoverflow.com/questions/12013066/how-to-ignore-parent-elements-overflowhidden-in-css
http://jsfiddle.net/2eudjcnL/1/

Author: zeel

Message:

Luckily, once you get the fixed element in place, anything absolute inside of it works more or less correctly. So you just need a wrapper, no need to mess with margins to move your elements.
This horse is a liar, but it knows its history.
Thanks <@!184749863387398144>, last time I tried to find a solution for that problem I struck out.