1、static（靜態定位）：
默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。參考上篇隨筆。
2、relative（相對定位）：
定位為relative的元素脫離正常的文檔流，但其在文檔流中的位置依然存在，只是視覺上相對原來的位置有移動。
通過top,bottom,left,right的設置相對於其正常（原先本身）位置進行定位。可通過z-index進行層次分級 。
.static1{ height:80px; background-color: red; } .relative{ height:80px; position:relative; top:40px; left:40px; background-color: black; } .static2{ height:80px; background-color: blue; }
</style> </head> <body> <div class="static1"></div> <div class="relative"></div> <div class="static2"></div> </body>
他是默認參照父級的原始點為原始點（父級不是必須設定position屬性），無論父級存在不存在，無論有沒有TRBL，均是以父級的左上角進行定位，但是父級的Padding屬性會對其影響。
無父級則以文本流的順序在上一個元素的底部為原始點
3、absolute（絕對定位）：生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可通過z-index進行層次分級。
定位為absolute的層脫離正常文檔流，但與relative的區別是其在正常流中的位置不再存在。
這個屬性總是有人給出誤導。說當position屬性設為absolute后，總是按照瀏覽器窗口來進行定位的，這其實是錯誤的。實際上，這是fixed屬性的特點。
1，如果沒有TRBL(top、right、bottom、left)，以父級的左上角，在沒有父級的時候，參照瀏覽器左上角。
2，如果設定TRBL，並且父級沒有設定position屬性（position:static;不算設定了屬性），那么當前的absolute則以瀏覽器左上角為原始點進行定位，位置將由TRBL決定。
3，如果設定TRBL，並且父級設定position屬性(無論是absolute還是relative)，則以父級的左上角為原點進行定位，位置由 TRBL決定。即使父級有Padding屬性，對其也不起作用。
<style type="text/css"> .static1{ height:80px; background-color: red; } .father{ height:100px; background-color: pink; position:relative; left:20px; } .relative{ height:80px; width:80px; position:absolute; top:10px; left:10px; background-color: black; } .static2{ height:80px; background-color: blue; } </style> </head> <body> <div class="static1"></div> <div class="father"> <div class="relative"></div> </div> <div class="static2"></div>
4、fixed（固定定位）：生成絕對定位的元素，相對於瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可通過z-index進行層次分級。
1、如果沒有TRBL(top、right、bottom、left)，默認參照父級的原始點為原始點（父級不是必須設定position屬性）。
2、如果設定TRBL，相對於瀏覽器窗口進行定位。
<style type="text/css"> .static1{ height:80px; background-color: red; } .father{ height:100px; width:300px; background-color: pink; left:100px; top:100px; } .relative{ height:80px; width:80px; position:fixed; left:20px; background-color: black; } .static2{ height:80px; background-color: blue; } </style> </head> <body> <div class="static1"></div> <div class="father"> <div class="relative"></div> </div> <div class="static2"></div>
z-index屬性
z-index，又稱為對象的層疊順序，它用一個整數來定義堆疊的層次，整數值越大，則被層疊在越上面，當然這是指同級元素間的堆疊，如果兩個對象的此屬 性具有同樣的值，那么將依據它們在HTML文檔中流的順序層疊，寫在后面的將會覆蓋前面的。需要注意的是，父子關系是無法用z-index來設定上下關系 的，一定是子級在上父級在下。
Note：使用static 定位或無position定位的元素z-index屬性是無效的。