绝对定位与相对定位

属性	文档流	参考定位
static(静态)	不脱离	-
relative(相对定位)	不脱离	参考自身(static时的位置)
absolute(绝对定位)	脱离	父元素设置了相对定位或者绝对定位，元素会相对于离自己最近的设置了相对或者绝对定位的父元素进行定位。如果父元素没有设置定位属性，以body坐标原点进行定位
fixed(固定定位)	脱离	浏览器窗口

static 是position默认值，文档流从上到下依次排列

固定定位是特殊的绝对定位，他的参考定位是可视窗口，与父类元素没有关系

绝对定位的宽度如果没有设置的话，会按照内部最大元素的宽度设置

---

给父级盒子一个相对定位，子元素相对父元素绝对定位，这样子元素就能从父元素左上方作为起点开始移动，方便管理

即父亲用相对定位 儿子用绝对定位

#father{
    width:400px;
    height:200px;
    background-color: rgb(1, 162, 255);
    /*position: relative;*/
}
#son{
    width:200px;
    height:100px;
    background-color: black;
    position:absolute;
    left:0px;
    top:0px;
 }

可以看到此时子元素是相对于浏览器窗口进行定位的

将父元素设置成相对定位后：

此时子元素相当于父元素进行定位