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