position:fixed顯示錯位

在專案開發過程中遇到一個問題，使用layer顯示彈出框時，彈出框裡面的標籤設定position:fixed顯示位置是從彈出框位置進行定位，而非螢幕視口（viewport）的位置來定位。
經過調查發現，原來layer彈出框使新增了layui-anim類，這樣樣式類中使用了transform進行動畫的效果的設定。

position:fixed定位錯誤原因：當使用了position:fixed 的元素，如果其祖先元素存在 transform 值不為 none ，那麼該元素將相對於設定了 transform 的祖先元素進行定位。

為什麼會出現種情況：
      1.任何非 transform 為 none 值都會導致一個堆疊上下文（Stacking Context）和包含塊（Containing Block）的建立。
      2.由於堆疊上下文的建立，該元素會影響其子元素的固定定位。設定了 position:fixed 的子元素將不會基於 viewport 定位，而是基於這個父元素。

 解決方案：
    1.設定 transform 為 none  
     2.把使用position:fixed 的元素放置在 transform 不為 none 的外面

除了transform 不為 none 情況下導致position:fixed 的元素顯示錯位，還有其他樣式也可以導致，以下3 種方式會使得 position:fixed 定位的錯位：
  1.transform 屬性值不為 none 的元素
  2.perspective 值不為 none 的元素
  3.在 will-change 中指定了任意 CSS 屬性

總結：目前開發過程中發現導致position:fixed 定位的錯位主要都是css3新增屬性導致。