issues: 父级元素包含transform导致fixed定位失效

transform 对其他元素渲染的副作用有

• transform 的元素会影响overflow area (溢出区域)。也就是说，使用transform使得元素移出了父元素之外的话，在父元素上使用overflow: scroll和overflow:auto的情况下，父元素将会展示出滚动条。
• transform 的元素会创造一个stack context (层叠上下文)，造成内部和外部的z-index相互独立。
• transform 的元素将会创建一个 containing block (包含块)，所有的position为absolute和fixed的子元素、以及设置了background-attachment的背景将会相对于该元素的 padding box 布局。

第三条即造成fixed失效的原因；是由于transform元素创建了一个Containing Block —— 它是元素渲染的一个基本概念，会影响元素的布局。

原因：position为absolute或fixed，包含块可能有满足以下条件的最近父级元素的内边距的边缘组成：

1. transform或perspective不为none；
2. filter不为none；
3. will-change为transform或perspective；
4. contain为paint；

demo地址

Containing Block

参考一下关于containing block的确定，可以看到定位属性为fixed或者absolute的元素都会受到transform包含块影响。

参考文献

transform的副作用——从失效的fixed说起
contain