CSS tranform和fixed的恩怨情仇

发现这个问题是在写代码的时候发现，轮播组件里被轮播组件包裹的position:fixed定位失效了。

<el-carousel
  ref="carousel"
>
  <el-carousel-item name="0">
    <img :src="src1">
    <play-control
      :visible="true"
    />
  </el-carousel-item>
  <el-carousel-item name="1">
    <img :src="src2">
  </el-carousel-item>
</el-carousel>

其中，<play-control>公用组件就是position:fixed，相对于浏览器窗口的绝对定位，但是在这个轮播图中，它却变成了变成了相对于父元素的绝对定位。查了一下，是受父元素轮播项transform:translateX()的影响，所有的CSS3 transform变换，无论是scale还是translate，都会让position:fixed相对定位对象变成父元素，就像absolut。
这是css本身的特性（或者缺陷？）无法改变，只能从另一角度去找解决方案。那就是在当前组件另写样式去控制<play-control>的绝对定位值，例如把原本的top:20px改成top:0之类的。

后来看了鑫大神的博客CSS3 transform对普通元素的N多渲染影响才知道，transform对元素渲染的影响可不止这么一点，真的是又涨见识了。