position 属性
position属性用来指定一个元素在网页上的位置，一共有5种定位方式，即position属性主要有五个值。
- static
- relative
- fixed
- absolute
- sticky
下面主要介绍前四个常用的值。
static 属性值
static是position属性的默认值。
这时，浏览器会按照源码的顺序，决定每个元素的位置，这称为"正常的页面流"（normal flow）。每个块级元素占据自己的区块（block），元素与元素之间不产生重叠，这个位置就是元素的默认位置。
注意，static定位所导致的元素位置，是浏览器自主决定的，所以这时top、bottom、left、right这四个属性无效。
relative，absolute，fixed属性值
relative、absolute、fixed这三个属性值有一个共同点，都是相对于某个基点的定位，不同之处仅仅在于基点不同。
relative 属性值
relative表示，相对于默认位置（即static时的位置）进行偏移，即定位基点是元素的默认位置。
它必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离。
div {
position: relative;
top: 20px;
}
absolute 属性值
absolute表示，相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素。
它有一个重要的限制条件：定位基点（父元素）一般不能是static定位，否则定位基点就会变成整个网页的根元素html。另外，absolute定位也必须搭配top、bottom、left、right这四个属性一起使用。
/*
HTML 代码如下
<div id="father">
<div id="son"></div>
</div>
*/
#father {
positon: relative;
}
#son {
position: absolute;
top: 20px;
}
注意，absolute定位的元素会被"正常页面流"忽略，即在"正常页面流"中，该元素所占空间为零，周边元素不受影响。
fixed 属性值
fixed表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。
它如果搭配top、bottom、left、right这四个属性一起使用，表示元素的初始位置是基于视口计算的，否则初始位置就是元素的默认位置。