初学CSS：实现网页返回顶部按钮

1、问题需求

实现网页中常见的返回顶部按钮。当网页向下浏览到一定距离之后才会出现返回顶部按钮，当回到网页初始状态之后，返回顶部按钮又会隐藏。

2、操作原理

使用浮动float属性和定位属性position:sticky

3、解决方案

返回按钮使用div实现。将返回顶部div放置在需要的位置，使用position属性的sticky，实现当网页浏览到一定距离时，才会出现返回按钮。再使用float属性将div定位到右侧。

<!-- HTML --><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><!-- 返回顶部按钮，这里需要放置在自己指定的位置，以此实现网页浏览到这里时，出现返回顶部按钮 --><div class="back-top"><a href="#top">返回顶部</a></div><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p>

.back-top{/*float将div脱离文档流，这样就不会占据文档流中的位置，不会留有空白*/float: right;/*这里使用right将其浮动至右侧*/right: 100px;width: 100px;height: 100px;border-radius: 50px;background: #999999;position: sticky;/*注意：top属性实现定位，top和bottom等定位方式是不同的*/top: 500px;right: 100px;}.back-top>a{display: block;text-align: center;text-decoration: none;font-size: 20px;line-height: 100px;}

但是这里使用的float是存在问题的，因为float还是会占据位置的，原因是因为外部的div存在高度与宽度，那么这里将外部的div的宽度和高度设置为0就可以实现假不占据文档位置。

.back-top{position: sticky;top: 500px;height: 0px;float: right;right: 50px;}.back-top>a{display: block;width: 100px;height: 100px;text-align: center;text-decoration: none;font-size: 20px;line-height: 100px;border-radius: 50px;background: #999999;}

4、实现结果

5、总结

将带有position:sticky属性的元素放在需要的位置，必须要设定好left、right、top、bottom其中的一个值，可以设置多个，但是不能同时设置相反的值；使用float将元素设定在指定位置，但是不知道会不会对position产生影响，所以这里存疑；父元素必须是overflow:visible，否则不会生效，如果是hidden，则父容器无法进行滚动，所以 position:sticky 元素也不会有滚动然后固定的情况;

告读者知：这是作者在实践中遇到的问题，但是其解决办法不会只有一种，而且作者方法可能存在很多问题，所以如果您若是使用的话请谨慎，遇到问题可以进行留言评论，大家可以相互交流。