Last Updated: February 25, 2016
·
16.94K
· bezoerb

Break out of overflow hidden with relative positioned fixed elements

"For elements whose layout is governed by the CSS box model, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants."
http://dev.w3.org/csswg/css-transforms/#transform-rendering

<div style="transform: translate3d(0,0,0);overflow:hidden">
   <img style="position:fixed; ..." />
</div>

To position the element relative to a parent element simply set a transform style to the parent.
The parent will now act as a containing block for fixed children.

3 Responses
Add your response

mmm dont' work on my example http://codepen.io/juanbrujo/pen/lKuvD

over 1 year ago ·

Sorry, missed something ;)
http://codepen.io/bezoerb/pen/AGgcu

You must wrap the overflow hidden with the transformed element.
Downside: think it doesn't work in IE

over 1 year ago ·

But this doesnt solve the situation when you need fixed element and its parent with overflow hidden. Now it behaves as absolutely positioned..

over 1 year ago ·