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对元素渲染的影响可不止这么一点,真的是又涨见识了。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。