Either way, here’s where things got really troublesome for me: a transformed element creates a containing block even for descendants that have been set to position: fixed
. In other words, the containing block for a fixed-position descendant of a transformed element is the transformed element, not the viewport. Furthermore, if the transformed element is in the normal flow, it will scroll with the document and the fixed-position descendants will scroll with it. You can see my test case, where the red and blue boxes would overlap each other and stay fixed in place, except the second green div
has been rotated.
http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/
应用了transform的元素类似于被加了position:relative,而且还硬生生的把其包含的fixed元素行为搞成了和absolute一样。