{"id":156,"date":"2020-06-09T16:42:53","date_gmt":"2020-06-09T13:42:53","guid":{"rendered":"https:\/\/guoyunhe.me\/en\/?p=156"},"modified":"2020-06-09T16:42:53","modified_gmt":"2020-06-09T13:42:53","slug":"position-fix-not-working-check-transform","status":"publish","type":"post","link":"https:\/\/guoyunhe.me\/en\/2020\/06\/09\/position-fix-not-working-check-transform\/","title":{"rendered":"position: fix not working? Check transform"},"content":{"rendered":"\n<p>In CSS, many position\/layout properties are context-aware. For example, <code>position: absolute;<\/code> only works if the desired parent has <code>position: related\/absolute\/fixed;<\/code>. However, <code>position: fixed;<\/code> is very simple. It is always related to window, barely affected by parent container. But, I stuck in this small issue:<\/p>\n\n\n\n<div style=\"transform:scale(1);background:darkcyan;color:white;height:100px;padding:10px;\">\n    transform:scale(1);\n    <div style=\"position:fixed;right:10px;bottom:10px;background:darkorange;\">position:fixed; right:10px; bottom:10px;<\/div>\n<\/div>\n\n\n\n<p>This is strange, I have <code>position: fixed;<\/code> but why it doesn't work?<\/p>\n\n\n\n<p>So I checked its parent elements one by one and found the modal library left a <code>transform: scale(1);<\/code>. It doesn't make any visual difference and seems a side effect of animation. In browsers' implementation, even if <code>scale(1)<\/code> and <code>translateX(0)<\/code> don't make any sense, the <code>transform<\/code> property will recreate a coordinate system. As result, <code>position:fixed<\/code> of inner elements will not be related to window, but the <code>transform<\/code> element.<\/p>\n\n\n\n<p>The solution is simple, change <code>transform: scale(1)<\/code> to <code>transform: unset<\/code>. In practice, avoid using <code>transform<\/code> in large containers, like a sidebar or modal. If you need it, make sure here is no <code>position: fixed<\/code> inside, such as some popups.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In CSS, many position\/layout properties are context-aware. For example, position: absolute; only works if the desired parent has position: related\/absolute\/fixed;. However, position: fixed; is very simple. It is always related to window, barely affected by parent container. But, I stuck in this small issue: transform:scale(1); position:fixed; right:10px; bottom:10px; This is strange, I have position: fixed; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[14],"class_list":["post-156","post","type-post","status-publish","format-standard","hentry","category-code","tag-css"],"_links":{"self":[{"href":"https:\/\/guoyunhe.me\/en\/wp-json\/wp\/v2\/posts\/156","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/guoyunhe.me\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/guoyunhe.me\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/guoyunhe.me\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/guoyunhe.me\/en\/wp-json\/wp\/v2\/comments?post=156"}],"version-history":[{"count":1,"href":"https:\/\/guoyunhe.me\/en\/wp-json\/wp\/v2\/posts\/156\/revisions"}],"predecessor-version":[{"id":157,"href":"https:\/\/guoyunhe.me\/en\/wp-json\/wp\/v2\/posts\/156\/revisions\/157"}],"wp:attachment":[{"href":"https:\/\/guoyunhe.me\/en\/wp-json\/wp\/v2\/media?parent=156"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/guoyunhe.me\/en\/wp-json\/wp\/v2\/categories?post=156"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/guoyunhe.me\/en\/wp-json\/wp\/v2\/tags?post=156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}