position：fixed失效_swiper内fiexd失效-优快云博客

博客主要讲述设置position为fixed的元素定位失效问题。当祖先元素transform不为none时，该元素会相对于祖先元素定位。以swiper做的tab切换为例，因swiper添加transform样式导致底部按钮滚动，通过覆盖样式解决安卓问题，给底部按钮添加transform: translateZ(0)解决ios问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考文章：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)得以解决。