前言
CSS3之后position属性又增加了第5个属性值sticky,我们先看看MDN对于这个属性的介绍:
粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。
如MDN所说sticky其实就是relative加上fixed。那么具体属性特征我们可以举几个栗子说明一下。
具体特征
我们用一个栗子来解释下
- dom结构是这样的:
- CSS:
我们使body的高度为150vh使其可以滚动来看看效果:
很明显在滚动的过程中开始的时候,relative和sticky的行为都是一样的,但是当sticky与上方的距离到达为设定的50px的时候,sticky的的行为又和fixed一样了。