static
默認屬性。指定元素按照常規(guī)的文檔內(nèi)容流（對多數(shù)西方語言而言就是從左往右、從上到下）進行定位。靜態(tài)定位的元素不能使用top、left和類似其他屬性定位。欲對文檔元素使用CSS定位技術(shù)，先將position屬性設(shè)置為除此之外的其他3個屬性值。
absolute
該值指定元素是相對于它包含的元素進行定位。相對于所有其他的元素，絕對定位的元素是獨立定位的，它不是靜態(tài)定位的元素中文檔流的一部分。它的定位要么是相對于最近的定位祖先元素，要么是相對于文檔本身。層疊通過z-index設(shè)定
例如放置一個距離文檔左、上邊緣各100像素的元素，可以指定如下樣式：
<div style="position:absolute;left:100px;top:100px;"></div>
如果元素使用絕對定位，它的top和left屬性應(yīng)該解釋為它是相對于其position屬性設(shè)置為static值以外的祖先元素。如果絕對定位的元素沒有定位過祖先，則它的top和left屬性使用文檔坐標進行度量
fixed
該值指定元素是相對于瀏覽器窗口進行定位的。固定定位的元素總是顯示在那里，不會隨著文檔其他部分而滾動。類似絕對定位的元素，固定定位元素和其他元素是獨立的，它不是文檔流的一部分。大多數(shù)現(xiàn)代瀏覽器支持固定定位，除了IE6
例如定位一個元素讓其右、上邊緣相對于窗口右、上邊緣各10像素，并且不隨文檔的滾動而滾動
position:fixed;right:10px;top:10px;
relative
當position屬性設(shè)置為relative，元素按照常規(guī)的文檔流進行布局，它的定位相對于它文檔流中的位置進行調(diào)整。系統(tǒng)保留著元素在正常文檔流中的空間，不會因為要填充空間而將其各邊合攏，也不會將元素從新的位置“推開”
relative是通過自己自己來定位的，例如
#demo{position:relative;top:-50px;}
demo塊是相對于自己原來的位置下移了50px
要實現(xiàn)b在a的左上角，需要設(shè)置a的position為relative，b的position為absolute
<!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>
