position: fixed因為上層有transform導致失效解決方式


遇到得問題:

左右滑動切換子tab頁面,用了uniapp得swiper,導致組件頁面里定義得position: fixed失效(變成了絕對定位得效果)

 

解決方式:

// 一開始我打算重寫swiper用margin-left代替transform完成這個效果

 

 發現了更多得問題:各個組件頁面有很多地方定義了z-index和position:fixed導致渲染得效果很亂

 

最終解決方式:

我發現transform對於 position: sticky;吸頂這個屬性還是會保留視口偏移得特性(並且又保留了相對得效果,總體就是我想要得效果)

 

 

 

 position: fixed 改成 positionsticky,即可解決上層有transform導致失效得問題。

注意:

1. positionsticky好像不能設置right(我設置了沒效果),我改為了left

2. positionsticky的兼容性,沒有fixed好。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM