transform 引起的position:fixed和absolute失效问题

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一样。

 

转载于:https://www.cnblogs.com/chengmu1893/archive/2013/05/08/3067319.html