position: static;
/* 默认值，元素按正常文档流排列 */
Static 定位说明： 这是默认的定位方式，元素按照正常的文档流进行排列。top、right、bottom、left 属性对 static 定位的元素无效。
position: relative;
top: 20px;
left: 20px;
Relative 定位说明： 元素相对于其原始位置进行偏移，但在文档流中仍占据原来的空间。其他元素不会填补它留下的空白。
父容器 (position: relative)
Absolute
position: absolute;
top: 10px;
right: 10px;
Absolute 定位说明： 元素相对于最近的已定位祖先元素进行定位。如果没有已定位的祖先元素，则相对于文档的初始包含块定位。元素会脱离文档流。
position: fixed;
top: 50%;
right: 20px;
z-index: 1000;
Fixed 定位说明： 元素相对于浏览器窗口进行定位，即使页面滚动，元素也会保持在相同位置。常用于导航栏、回到顶部按钮等。
内容区域 1 - 向下滚动查看效果
Sticky 元素
内容区域 2
内容区域 3
内容区域 4
内容区域 5
position: sticky;
top: 20px;
Sticky 定位说明： 元素在跨越特定阈值前为相对定位，之后为固定定位。当页面滚动时，元素会"粘"在指定位置。在上方容器内滚动可以看到效果。