使用swiper插件问题

Question

使用swiper插件实现页面滑动切换，之后想让页面滚动条滚动时，让swiper-slide中的h4标题固定在顶部，使用了position：fixed没效果，不知道是不是swiper中的哪一个限制了

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><h4>标题1</h4>
            /*在这里添加了内容*/
            <div class="content">主体内容。。。。。。</div>
        </div>
        <div class="swiper-slide"><h4>标题2</h4></div>
        <div class="swiper-slide"><h4>标题3</h4></div>
        <div class="swiper-slide"><h4>标题4</h4></div>
        <div class="swiper-slide"><h4>标题5</h4></div>
                                
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
</div>

Answer 1

同样的问题， LZ 解决了没？

Answer 2

因为swiper是使用transform进行动画 所以不能用fixed定位
规范中有规定：如果元素的transform值不为none，则该元素会生成包含块和层叠上下文。CSS Transforms Module Level 1不只在手机上，电脑上也一样。除了fixed元素会受影响之外，z-index（层叠上下文）值也会受影响。绝对定位元素等和包含块有关的属性都会受到影响。当然如果transform元素的display值为inline时又会有所不同。最简单的解决方法就是transform元素内部不能有absolute、fixed元素。