div套路之悬浮的button

没有什么问题是用一个div解决不了的,如果有,那就用两个。

很多网站右侧都有一个或多个悬浮的按钮,不管页面滑动到哪,它就在你眼皮底下,今天就来实现这个悬浮的button。

Requirement:
实现跟随页面滚动的悬浮按钮。

Implementation:

  1. 首先我们要创建一个父div,把要放置的按钮都写在这个div中。
    html:
    <body>
    <div class="main-container">
    <div class="main-content"> //网页的主要内容
    </div>
    <div class="float-button"> //悬浮按钮
    </div>
    </div>
    </body>
  2. 通过css给这个父div设置属性,使其固定在屏幕上。
    CSS:
    .float-button {
    position: fixed; //关键
    height: 90px;
    width: 40px;
    bottom: 90px;
    right: 50px;
    background: #b4d145;
    }
    大功告成:


    Paste_Image.png

    右侧有了一个悬浮的div(浏览器的滚动条为证),将想要悬浮的内容写在这个div里面就可以了,是不是很简单。。◕‿◕。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,685评论 32 459
  • 第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根...
    凛0_0阅读 10,506评论 0 66
  • 人生第二十个年头,真真正正地来啦。且不管不顾不谈不论自己对于正式踏上奔三路作何感想,在这个特殊的日子,我要真真...
    吴长锵阅读 2,854评论 0 3
  • 那天,女人拿男人的手机来下单买书,在男人的手机里发现了男人的秘密! 开始,女人的头脑里不断回忆上演着那段痛苦的经...
    sa兰儿阅读 2,849评论 0 0