定位能够让我们把一个元素从它原本在正常布局流(normal flow)中应该在的位置移动到另一个位置。定位并不是一种用来给你做主要页面布局的方式，它更像是让你去管理和微调页面中的一个特殊项的位置。
一、静态定位（static）
默认值，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
二、相对定位（relative）
不脱离文档流，允许我们相对于元素在正常的文档流中的位置移动它，这属性本身不做任何事情，可使用top, bottom, left, 和 right 来精确指定要将定位元素移动到的位置。
该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。
position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
1. 使用场景
- 用于做位移（很少用）
- 用于给absolute元素做爸爸
2. 配合z-index使用
三、绝对定位（absolute）
用于将元素移出正常布局流，类似将它单独放在一个图层中，以坐标的形式相对于它的容器定位到web页面的任何位置，以创建复杂的布局。有趣的是，它经常被用于与相对定位和浮动的协同工作。
它的定位基准是祖先元素中最近的非static元素。
绝对定位在创建复杂布局效果时非常有用，例如通过标签显示和隐藏的内容面板或者通过按钮控制滑动到屏幕中的信息面板。
1.如果写了absolute，一般得在父元素补一个relative。
2.某些浏览器不写top/left会位置错乱。
3.善用left:100%
4.善用left:50%;加负margin
四、固定定位（fixed）
与绝对定位非常类似，但是它是将一个元素相对浏览器视口固定，而不是相对另外一个元素。
元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。
常用于某些网站烦人的广告，以及回到顶部按钮。
移动端尽量不要用这个属性，坑很多。
五、粘性定位（sticky）
是一种新的定位方式，它会让元素先保持和position: static一样的定位，当它的相对视口位置达到某一个预设值时，他就会像position: fixed一样定位。
参考资料：定位技术
