本文介绍如何使用HTML和CSS创建一个随页面滚动而始终显示在屏幕上的悬浮按钮，详细讲解了实现步骤和关键代码。
转载：https://www.jianshu.com/p/a03f6136ad8c
很多网站右侧都有一个或多个悬浮的按钮，不管页面滑动到哪，它就在你眼皮底下，今天就来实现这个悬浮的button。
Requirement:
实现跟随页面滚动的悬浮按钮。
Implementation:
- 首先我们要创建一个父div，把要放置的按钮都写在这个div中。
html:
<body>
<div class="main-container">
<div class="main-content"> //网页的主要内容
</div>
<div class="float-button"> //悬浮按钮
</div>
</div>
</body> -
通过css给这个父div设置属性，使其固定在屏幕上。
CSS:
.float-button {
position: fixed; //关键
height: 90px;
width: 40px;
bottom: 90px;
right: 50px;
background: #b4d145;
}
大功告成： -
右侧有了一个悬浮的div（浏览器的滚动条为证），将想要悬浮的内容写在这个div里面就可以了，是不是很简单。｡◕‿◕｡
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
