zoukankan      html  css  js  c++  java
  • 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好。

  • 相关阅读:
    Linux之nginx服务
    设计模式-总结
    linux rabbitmq 远程登录
    swagger常用注解
    nginx总结
    mysql-sql
    dubbo-文档
    JVM总结-Java语法糖与Java编译器
    JVM总结-synchronized
    JVM总结-java内存模型
  • 原文地址:https://www.cnblogs.com/zezhou/p/15425321.html
Copyright © 2011-2022 走看看