一.position值
position一共有5種值,分別是static,relative,absolute,fixed,sticky。今天主要總結的是sticky。
二.sticky
解釋:當position的值為sticky時,元素會根據正常文檔流進行定位。粘性定位可以被認為是相對定位和固定定位的混合。元素在跨越特定閾值前為相對定位,之后為固定定位。
sticky的值有四個分別是top,right,buttom,left。必須指定這四個閾值中的一個,才可以使粘性定位生效,否則行為與其相對定位相同。
三.例子
#one { position: sticky;top: 10px}
表示在viewport視口滾動到元素top距離小於10px之前,元素為相對定位。之后,元素將固定在與頂部距離10px的位置,直到viewport視口回滾到閾值以下。
四.效果演示