发现这个问题是在写代码的时候发现,轮播组件里被轮播组件包裹的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对元素渲染的影响可不止这么一点,真的是又涨见识了。