Menu
The following example shows a div inside a div. The inner div is
position: fixed;
When I add
transform: translate(0px, 0px);
to the outer div, the inner div will no longer behave as fixed
Link to the example: http://dabblet.com/gist/1723937
So, does translate actually change the viewport? Can anyone help me to keep the inner div fixed using css, when the outer div has a translate style?
Thank you, Felix
715
Effectively it means that by specifying will-change:transform you make the element transformed (though visually it stays in the same position), and descendants of the transformed elements can't be fixed per the CSS Transforms spec.
Set everything up as you would if you want to position: absolute inside a position: relative container, and then create a new fixed position div inside the div with position: absolute , but do not set its top and left properties. It will then be fixed wherever you want it, relative to the container.
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element. A fixed element does not leave a gap in the page where it would normally have been located.
Here is an article on it:
http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/
Hope you find it helps.
90
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
