relative相对定位
将定位元素偏离正常文档流，但占用正常文档流的位置。如下图中：
1.relative相对定位是相对于自身的定位，relative元素不加position定位，位置是在虚框位置。
relative元素加了position: relative;将根据top/bottom/left/right,基于虚框的margin左上外角定位的。
2.虚框为relative元素占用的正常文档流的位置，所以正常元素到下面了。
<style>* {padding: 0;margin: 0;}#sub1 {height: 100px;width: 100px;position: relative;top: 100px;left: 100px;background-color: red;}#sub2 {height: 100px;width: 100px; background-color: green;}</style><body style="border:1px black solid"><div id="sub1">relative元素</div><div id="sub2">正常元素</div></body>
absolute绝对定位
将定位元素偏离正常文档流，不占用正常文档流的位置。如下图中：
<style>* {padding: 0;margin: 0;}#sub1 {height: 100px;width: 100px;position: absolute;/* margin: 10px;border: 10px;padding: 10px; */top: 100px;left: 100px;background-color: red;}#sub2 {height: 100px;width: 100px;/* position: relative;top: 100px;left: 100px; */background-color: green;}</style><body style="border:1px black solid"><div id="sub1">absolute元素</div><div id="sub2">正常元素</div></body>
1.absolute元素的父元素没有position定位，absolute元素相对于body定位
<style>* {padding: 0;margin: 0;}#parent {height: 100px;width: 100px;background-color: yellow;/* position: absolute; */margin: 100px;padding: 100px;}#child {height: 100px;width: 100px;position: absolute;/* margin: 10px;border: 10px;padding: 10px; */top: 100px;left: 100px;background-color: red;}</style><body style="border:1px black solid"><div id="parent">父元素<div id="child">absolute元素</div></div></body>
2.absolute元素的父元素有position定位（absolute或relative），absolute元素相对于父元素的padding左上外角进行定位
<style>* {padding: 0;margin: 0;}#parent {height: 100px;width: 100px;background-color: yellow;position: absolute;margin: 100px;padding: 100px;}#child {height: 100px;width: 100px;position: absolute;/*或者positi:relative*//* margin: 10px;border: 10px;padding: 10px; */top: 100px;left: 100px;background-color: red;}</style><body style="border:1px black solid"><div id="parent">父元素<div id="child">absolute元素</div></div></body>
fixed固定定位
脱离文档流，不占用正常文档流，相对于body定位
