大学生就可以看懂的css基础实战系列，pre标签里是笔记总结，动手实际操作一下会加强理解。有疑问留言交流哦。
可能比较枯燥，但是再坚持一下，前端知识的大门就会大开了。
<html>
<style>
span {
display: block;
}
.fixed1 {
position: fixed;
right: 5px;
top: 5px;
background-color: bisque;
height: 20px;
}
.sticky1 {
position: sticky;
position: -webkit-sticky;
top: 25px;
bottom: 0px;
left: 5px;
background-color: aquamarine;
}
</style>
<body>
<div class="fixed1">
fixed div
</div>
<span>aaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
<span>aaaaaaaaaaa</span>
<span>aaaaaaaaaaa</span>
<span>aaaaaaaaaaa</span>
<span>aaaaaaaaaaa</span>
<span>aaaaaaaaaaa</span>
<span>aaaaaaaaaaa</span>
<div class="sticky1">
sticky div
</div>
<span>aaaaaaaaaaa</span>
<span>aaaaaaaaaaa</span>
<span>aaaaaaaaaaa</span>
<span>aaaaaaaaaaa</span>
<span>aaaaaaaaaaa</span>
<span>aaaaaaaaaaa</span>
<span>aaaaaaaaaaa</span>
<span>aaaaaaaaaaa</span>
<span>aaaaaaaaaaa</span>
<span>aaaaaaaaaaa</span>
<span>aaaaaaaaaaa</span>
<span>aaaaaaaaaaa</span>
<span>aaaaaaaaaaa</span>
<span>aaaaaaaaaaa</span>
<span>aaaaaaaaaaa</span>
<span>aaaaaaaaaaa</span>
<span>aaaaaaaaaaa</span>
<span>aaaaaaaaaaa</span>
<span>aaaaaaaaaaa</span>
<span>aaaaaaaaaaa</span>
<span>aaaaaaaaaaa</span>
<span>aaaaaaaaaaa</span>
<span>aaaaaaaaaaa</span>
<span>aaaaaaaaaaa</span>
<span>aaaaaaaaaaa</span>
</body>
</html>