css-position

position :元素的定位类型
static（默认）
relative
fixed
absolute
sticky

static 定位（ top, bottom, left, right无效）
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。

fixed 定位（ top, bottom, left, right有效）脱离文档流（可以和别的元素重叠），不占位置
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：

relative 定位
相对定位元素的定位是相对其正常位置。
移动相对定位元素，但它原本所占的空间不会改变。（移动后的位置可能和别的元素重叠）
相对定位元素经常被用来作为绝对定位元素的容器块。（子绝父相）

absolute 定位（脱离文档流，不占位置）
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:
absolute 定位的元素和其他元素重叠。

sticky定位 粘性定位 position:relative 与 position:fixed 定位之间切换
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位（absolute），之后为固定定位（fixed）。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。