前端：CSS定位position

position有四个值：

static：默认值。设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。
relative：设置为 relative 的元素的 top、bottom、left和 right都是相对于原来的位置。元素仍然占据原来在页面流中的位置。
absolute：设置为 absolute 的元素的 top、bottom、left和 right相对于最近的定位不是 static的父元素。如果所有父元素定位都是 static，则相对于 window进行定位。元素不占据页面流中的位置。
fixed：设置为 fixed 的元素，相对于浏览器窗口进行定位。元素不再占据页面流中的位置。

需要注意的是，设置了 left的元素不能再设置 right，设置了 top的元素不能再设置 bottom，反过来也是一样。如果同时设置的话，left的优先级高于 right，top优先级高于 bottom（不论它们出现的位置如何）。

另外 left参考元素的左侧边，right参考元素的右侧边，top参考元素的上边，bottom参考元素的下边。

也就是说，如果元素的 position设置为 relative，left指的是元素的左侧边相对于原来的位置移动的距离。如果元素的 position设置为 absolute，left指的是元素的左侧边和最近定位不是 static的父元素的左侧边的距离。right、top和 bottom同理。

参考： position 的注意点与使用场景：https://blog.csdn.net/dhl879850/article/details/83057328