前言：
定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。
CSS的position属性用于指定一个元素在文档中的定位方式。top，right，bottom和 left属性则决定了该元素的最终位置。
分别有五个属性：
- static,
- relative
- absolute
- fixed
- sticky
静态定位（static）：
默认值, 也就是默认 position 不写的话就是 static 的属性值，它只是意味着“将元素放入它在文档布局流中的正常位置。
相对定位（relative）：
相对定位与静态定位非常相似，占据在正常的文档流中，除了你仍然可以修改它的最终位置，包括让它与页面上的其他元素重叠。
设定 relative 后, 然后再给他一个 top 和 left 属性, 他就会相对自己的位置去移动, 而且自身所占的空间不会被挤掉。
top, bottom, left, 和 right 来精确指定要将定位元素移动到的位置。（这些属性的值可以采用逻辑上期望的任何单位 ——px，mm，rems，％等。）
绝对定位（absolute）：
absolute 属性脱离文本流, 常与 relative 结合使用, 实现一些垂直居中, 定位技巧, 三栏布局等样式。
注意： absolute 根据父级元素是否有除了 position: static 属性来判断依据哪个元素定位。
绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。
拓展：z-index
绝对定位不存在正常文档流中，这样就会出现重叠的问题，z-index 值影响定位元素位于该轴上的位置；正值将它们移动到堆栈上方，负值将它们向下移动到堆栈中。默认情况下，定位的元素都具有z-index为auto，实际上为0，这样就能决定绝对定位元素展示顺序。
固定定位（fixed）：
fixed 这个属性是依据 浏览器窗口 来实现的定位，常用场景就是一些浮窗广告，或者固定侧边栏。
固定定位（sticky）：
sticky基本上是相对位置和固定位置的混合体，也就是说它不脱离文档流, 占用位置空间，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点，当然它是被父元素限制的。
常用于一些文档流的内容，滚动超出屏幕后固定显示的场景。
