div套路之悬浮的button
2016-09-06 本文已影响6574人
Candy_M
没有什么问题是用一个div解决不了的，如果有，那就用两个。
很多网站右侧都有一个或多个悬浮的按钮，不管页面滑动到哪，它就在你眼皮底下，今天就来实现这个悬浮的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;
}
大功告成：
Paste_Image.png
右侧有了一个悬浮的div（浏览器的滚动条为证），将想要悬浮的内容写在这个div里面就可以了，是不是很简单。｡◕‿◕｡
