1.relative
元素相对自身的原位置偏移某个距离,但是原本的空间依旧保留,表现为空白
2.absolute
原来的元素空间被删除,新生成一个块级框,与页面内容相对静止,如果页面向下滑动,该块级框会跟随向上运动
3.fixed
原来的元素空间被删除,新生成一个块级框,固定在页面的一个位置,即使向下滑动页面,该块级框依旧位置不改变
4.sticky
跟随页面一起滚动,当超过阈值以后,固定在页面边缘,相当于 absolute和fixed的混合
例如:#one { position: sticky; top: 10px; }
在 viewport 视口滚动到元素 top 距离小于 10px 之前,元素为相对定位。之后,元素将固定在与顶部距离 10px 的位置,直到 viewport 视口回滚到阈值以下。