css中position属性值的区别

1.relative

     元素相对自身的原位置偏移某个距离,但是原本的空间依旧保留,表现为空白

2.absolute

  原来的元素空间被删除,新生成一个块级框,与页面内容相对静止,如果页面向下滑动,该块级框会跟随向上运动

3.fixed

  原来的元素空间被删除,新生成一个块级框,固定在页面的一个位置,即使向下滑动页面,该块级框依旧位置不改变

4.sticky

 跟随页面一起滚动,当超过阈值以后,固定在页面边缘,相当于 absolute和fixed的混合

 例如:#one { position: sticky; top: 10px; }

在 viewport 视口滚动到元素 top 距离小于 10px 之前,元素为相对定位。之后,元素将固定在与顶部距离 10px 的位置,直到 viewport 视口回滚到阈值以下。

posted @ 2018-10-24 23:05  Hester_W  阅读(598)  评论(0编辑  收藏  举报