参考文章:position失效了?
设置了position为fixed的元素,如果其祖先元素的transform不为none,则该元素会相对于该祖先元素进行定位,而不是相对于窗口进行定位。
一个使用swiper做的tab切换,因为只需要在单个tab页内添加一个顶部按钮,因此在位置1处添加了button,然后使用position:fixed进行定位。
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<!-- 位置1 -->
Slide 1
底部按钮
</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
然而问题出现了,当slide1处内容很多时,向下滑动的时候,底部按钮也会随着滚动。经过问题排查发现因为swiper会给.swiper-container-android .swiper-slide和.swiper-wrapper增加transform: translate3d(0,0,0),于是在对应的swiper-slide使用transform: none;进行了样式覆盖。
使用浏览器手机模式和安卓机测试成功解决问题,但是用ios手机测试后,仍然发现问题。最后给底部按钮添加transform: translateZ(0)得以解决。