static
默认属性。指定元素按照常规的文档内容流（对多数西方语言而言就是从左往右、从上到下）进行定位。静态定位的元素不能使用top、left和类似其他属性定位。欲对文档元素使用CSS定位技术，先将position属性设置为除此之外的其他3个属性值。
absolute
该值指定元素是相对于它包含的元素进行定位。相对于所有其他的元素，绝对定位的元素是独立定位的，它不是静态定位的元素中文档流的一部分。它的定位要么是相对于最近的定位祖先元素，要么是相对于文档本身。层叠通过z-index设定
例如放置一个距离文档左、上边缘各100像素的元素，可以指定如下样式：
<div style="position:absolute;left:100px;top:100px;"></div>
如果元素使用绝对定位，它的top和left属性应该解释为它是相对于其position属性设置为static值以外的祖先元素。如果绝对定位的元素没有定位过祖先，则它的top和left属性使用文档坐标进行度量
fixed
该值指定元素是相对于浏览器窗口进行定位的。固定定位的元素总是显示在那里，不会随着文档其他部分而滚动。类似绝对定位的元素，固定定位元素和其他元素是独立的，它不是文档流的一部分。大多数现代浏览器支持固定定位，除了IE6
例如定位一个元素让其右、上边缘相对于窗口右、上边缘各10像素，并且不随文档的滚动而滚动
position:fixed;right:10px;top:10px;
relative
当position属性设置为relative，元素按照常规的文档流进行布局，它的定位相对于它文档流中的位置进行调整。系统保留着元素在正常文档流中的空间，不会因为要填充空间而将其各边合拢，也不会将元素从新的位置“推开”
relative是通过自己自己来定位的，例如
#demo{position:relative;top:-50px;}
demo块是相对于自己原来的位置下移了50px
要实现b在a的左上角，需要设置a的position为relative，b的position为absolute
图片.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="position:relative;background-color:red;width:200px;height:200px;">a
<div style="position:absolute;right:0px;top:0px;background-color:blue;width:100px;height:100px;">b</div>
</div>
</body>
</html>
