定位（Position）

固定顶端

将元素固定在屏幕的顶端，边缘相接。确保您了解项目中使用fixed定位的结果，可能会需要添加其他CSS。

<div class="fixed-top">...</div>

固定底部

将元素固定在屏幕的底部，边缘相接。确保您了解项目中使用fixed定位的结果，可能会需要添加其他CSS。

<div class="fixed-bottom">...</div>

粘性固定顶端

将元素固定在屏幕的顶部，边缘相接。但只有在滚动离开该元素之后才会执行。.sticky-top通用类别使用CSS的position: sticky，并非所有浏览器都完全支持。

译者注：
position: sticky粘性定位：是css新增的一个position属性。说是对于IOS的兼容性好一点，对于安卓的兼容性不太好（我自己感觉安卓的兼容性也不错）
与position:fixed的区别：我们都知道常用的几个定位（static、absolute、relative、fixed），如果没有额外的js处理，只要写上，页面立马就可以看到相对应的效果。而sticky相当于加了一个滚动事件的处理，当页面滚动到相对应的元素上，就会变成固定定位的效果。当滚动到父元素不在可视区域范围内时，定位效果就会消失。
适用场合：一开始不显示，滚动到一定位置需要显示的元素。
使用注意事项：
父元素不能有overflow属性
left、top、right、bottom必须要有一个
仅在父元素内生效，父元素的高度必须大于sticky元素的高度
ios加前缀-webkit-sticky（考虑到兼容问题）

<div class="sticky-top">...</div>

响应式粘性固定顶端

.sticky-top通用类别也支持响应式变化。

<div class="sticky-sm-top">Stick to the top on viewports sized SM (small) or wider</div>
<div class="sticky-md-top">Stick to the top on viewports sized MD (medium) or wider</div>
<div class="sticky-lg-top">Stick to the top on viewports sized LG (large) or wider</div>
<div class="sticky-xl-top">Stick to the top on viewports sized XL (extra-large) or wider</div>