作用：相对定位（position:relative）和固定定位（position:fixed）的混合。sticky相当于加了一个滚动事件的处理，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。当滚动到父元素不在可视区域范围内时，定位效果就会消失。
使用条件：
- 父元素不能overflow:hidden（容器无法滚动）
- 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
- 父元素的高度不能低于sticky元素的高度
- sticky元素仅在其父元素内生效
实现效果：
实现代码：
<body><div class="topcontent">最上面的内容</div><div id="sticky-nav">导航栏，给sticky定位top=0px</div><div class="box1" style="background-color: pink;position: relative;">盒子1<div class="child" style="position: absolute;bottom: 0;">这里到达PC端浏览器视口高度的最下方了</div></div><div class="box2" style="background-color: cyan;">盒子2</div><div class="box2" style="background-color: gray;">盒子3</div>
</body>
* {margin: 0;padding: 0
}html body {height: 100vh;/* 表示body的高度是当前可视窗口的高度。如果这里不加，那么当页面滚动到sticky-nav距离body上部为0px时，sticky-nav将始终处于固定定位的样子 */width: 100%
}.topcontent {height: 200px;background-color: lightblue;
}#sticky-nav {position: sticky;top: 0px;/*sticky-nav变为固定定位 box1此时相对定位，设置z-index是为了让sticky-nav始终在页面上方 */z-index: 9;width: 100%;height: 80px;background-color: yellowgreen;
}div[class^='box'] {height: 225px;
}
