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.
Written by Ben Zörb
Related protips
3 Responses
mmm dont' work on my example http://codepen.io/juanbrujo/pen/lKuvD
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
But this doesnt solve the situation when you need fixed element and its parent with overflow hidden. Now it behaves as absolutely positioned..