5.10 定位
在Bootstrap 4中，定位元素可以使用以下类来实现。
■ .position-static：无定位。
■ .position-relative：相对定位。
■ .position-absolute：绝对定位。
■ .position-fixed：固定定位。
■ .position-sticky：黏性定位。
无定位、相对定位、绝对定位和固定定位很好理解，只要在需要定位的元素中添加这些类，就可以实现定位。相比较而言，.position-sticky类很少使用，主要原因是.position-sticky类对浏览器的兼容性很差，只有部分浏览器支持（例如谷歌和火狐浏览器）。
.position-sticky是结合.position-relative和.position-fixed两种定位功能于一体的特殊定位，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。特定阈值指的是top，right，bottom或left中的一个。也就是说，必须指定top，right，bottom或left四个阈值之一，才可使黏性定位生效，否则其行为与相对定位相同。
在Bootstrap 4中的@supports规则下定义了关于黏性定位的top阈值类.sticky-top，CSS样式代码如下：
当元素的top值为0时，表现为固定定位。当元素的top值大于0时，表现为相对定位。
注意
如果设置.sticky-top类的元素，它的任意父节点定位是相对定位、绝对定位或固定定位时，该元素相对父元素进行定位，而不会相对viewprot定位。如果元素的父元素设置了overflow:hidden样式，元素将不能滚动，无法达到阈值，.sticky-top类将不生效。
.sticky-top类适用于一些特殊场景，例如头部导航栏固定。下面就来实现一下“头部导航栏固定”的示例。
【例5.26】定位示例。
在火狐浏览器中运行效果如图5-30所示，向下滚动滚动条，页面效果如图5-31所示。
图5-30 初始化效果
图5-31 滚动滚动条后效果
注意
内容栏的内容需要超出可视范围，当滚动滚动条时才能看出效果。