Menu
my question is pretty simple. I'm working on a page on mobile version, and we want to keep the "snag it" yellow button fixed on bottom, but position fixed is not working, it's working like position absolute and i don't know why.
The page i'm working: https://www.thechivery.com/products/everything-is-j-ok-tee
Thanks, Luiz
249
Position fixed doesn't work with transform CSS property. It happens because transform creates a new coordinate system and your position: fixed element becomes fixed to that transformed element. To fix the problem you can remove transform CSS property from the parent element.
Absolutely positioned elements are positioned with respect to a containing block, which is the nearest postioned ancestor. If there is no positioned ancestor, the viewport will be the containing block. Elements with fixed positioning are fixed with respect to the viewport—the viewport is always their containing block.
Static - this is the default value, all elements are in order as they appear in the document. Relative - the element is positioned relative to its normal position. Absolute - the element is positioned absolutely to its first positioned parent. Fixed - the element is positioned related to the browser window.
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
The issue here lies with your .content-container wrapper class, which has a CSS declaration of webkit-transform: translate3d(0,0,0). The transform declaration, as this answer illustrates, changes the positioning context from the viewport to the rotated element, which essentially means that your fixed element behaves as if it were absolutely positioned. Here's an example showing the difference between a fixed element inside a transformed div and a fixed element outside of that div.
.rotate { transform: rotate(30deg); background: blue; width: 300px; height: 300px; margin: 0 auto; } .fixed { position: fixed; background: red; padding: 10px; color: white; top: 50px; }<div class="rotate"> <div class="fixed"> I am fixed inside a rotated div.</div> </div> <div class="fixed"> I am fixed outside a rotated div.</div>In order for everything to work, you'll need to remove the transform3d declaration from .content-container.
120
For anyone wondering if this is a browser bug. Apparently it's not and it follows current W3C specs. What's strange is at first it was just inconsistent between the browsers (in some it worked as intended) and then all of them started to follow the counter intuitive W3C rules. There seems to be no clear explanation if this is actually intended logic, a side effect of some implementation problem or just a dumb omission.
Also position: fixed gets broken not only by transform but also by filter and perspective property put on any ancestor as explained here.
See: https://www.w3.org/TR/css-transforms-1/#propdef-transform and https://www.w3.org/Bugs/Public/show_bug.cgi?id=16328 and https://github.com/w3c/csswg-drafts/issues/913 for more info on this issue.
24
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
