position 的相关属性（绝对定位、相对定位）

position：absolute  绝对定位

是更具最近的定位父级进行定位的，如果没有确定定位父级，就以浏览器窗口进行定位。
比如：position：absolute; left:20px; top:80px; 这个容器始终位于距离浏览器左20px, 距离浏览器上80px的这个位置。

未设置 left top right bottom 的时候，元素还在自己该在的位置，只不过已不再占位。

position：relative  相对定位

是相对于元素本来的位置再进行平移后获得新的位置，也就是说这个新位置是要根据原来的位置来定的

比如 position：relative left:10px; top:-20px; 就是把元素往右移动10像素，往上移动20像素。

谁是定位父级 offsetParent

position:absolute; 元素，从该定位元素往外找，最近一个设置了 position：absolute; 或者 position：relative 的元素，就是改元素的定位父级。如果没有，就以浏览器窗口进行定位

position 的其它属性值

{
  position: static; // 静态的。默认值，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
  position: relative;
  position: absolute;
  position: fixed; // 固定定位。生成固定定位的元素，相对于浏览器窗口进行定位
  position: inherit; // 继承父级
  position: initial; // 初始
  position: unset; // 未设定
  position: sticky; // 粘性定位，可写吸顶效果，比如当该元素的top: 30px; 即该元素距离页面视口的30px处，由相对定位变成绝对定位
}