美文网首页
【真案例学CSS】css 实现吸顶(悬浮)效果

【真案例学CSS】css 实现吸顶(悬浮)效果

作者: 程序员成长之路 | 来源:发表于2020-08-21 04:45 被阅读0次

    我们要实现的就是右边的【参加挑战】按钮的效果,它会悬浮在手机屏幕的某个位置


    最终效果

    要实现这个效果其实很简单,几行代码搞定。该按钮的css样式加如下代码:

    position: fixed;
    bottom: 113upx;
    right: 32upx;
    

    解释: 起到关键作用的是position: fixed这行代码,然后通过left,right,top,bottom设置其悬浮的位置。

    相关文章

      网友评论

          本文标题:【真案例学CSS】css 实现吸顶(悬浮)效果

          本文链接:https://www.haomeiwen.com/subject/glkdjktx.html