CSS中的position定位
CSS定位(position)
目前CSS中的定位position可选值有5个：static、relative、fixed、absolute、sticky
static：静态定位
HTML元素的默认值，即没有定位，遵循正常的文档流对象
静态定位的元素不会受到 top, bottom, left, right影响
relative：相对定位
相对元素文档流的位置，不会对其它元素布局造成影响(可能堆叠)
原文档流位置保留
absolute：绝对定位
对于最近的非静态定位父级元素进行定位，如果没有找到符合条件的父元素则会相对与<html>定位
使用绝对定位的元素可以有外边距，并且外边距不会与其它元素的外边距发生重叠
一个绝对定位元素相对父元素居中可以设置距左50%，然后向左移动自身宽度的50%
left:50%
transform:translateX(-50%)
脱离文档流，原文档流位置不保留
fixed：固定定位
元素的位置相对于浏览器窗口，不会随着窗口的滚动而移动
当元素的祖先元素的transform，perspective或filter属性非none时，由相对浏览器窗口改为相对于该祖先元素
脱离文档流，原文档流位置不保留
sticky：粘性定位
基于用户的滚动位置来定位
粘性定位的元素是依赖于用户的滚动，在position:relative与position:fixed定位之间切换
元素定位表现为在跨越特定阈值前为相对定位(就像position:relative)，之后为固定定位(就像position:fixed)
这个特定阈值指的是 top, right, bottom 或 left 之一，只有指定至少一个，粘性定位才生效，否则与相对定位相同
这里设置的阈值是相对其第一个设置了overflow属性的祖先元素，如果所有祖先元素都没有设置该属性则相对于浏览器窗口
粘性定位的元素仅在其父元素内有效，当父元素滚动出了窗口时，该元素也跟着滚动出窗口