1、靜態定位（static）
left、right、top、bottom、z-index等屬性無效。
2、絕對定位（absolute）
將被賦予絕對定位的元素從文件流中拖出，使用left、right、top、bottom等屬性相對於其最接近的乙個最有定位設定的父級元素進行絕對定位，如果元素的父級沒有設定定位屬性，則依據 body 元素左上角作為參考進行定位。絕對定位元素可層疊，層疊順序可通過 z-index 屬性控制，z-index值為無單位的整數，大的在上面，可以有負值。
絕對定位的定位方法：如果它的父元素設定了除static之外的定位，比如position:relative或position:absolute及position:fixed，那麼它就會相對於它的父元素來定位，位置通過left , top ,right ,bottom屬性來規定，如果它的父元素沒有設定定位，那麼就得看它父元素的父元素是否有設定定位，如果還是沒有就繼續向更高層的祖先元素類推，總之它的定位就是相對於設定了除static定位之外的定位的第乙個祖先元素，如果所有的祖先元素都沒有以上三種定位中的其中一種定位，那麼它就會相對於文件body來定位（並非相對於瀏覽器視窗，相對於視窗定位的是fixed）。
one
twothree
four
定位到距離的頂部和左側分別50px的位置。會改變其他元素的布局，不會在此元素本來位置留下空白。
3、相對定位（relative）
相對定位元素不可層疊，依據left、right、top、bottom等屬性在正常文件流中偏移自身位置。同樣可以用z-index分層設計。
one
twothree
four
4、固定定位（fixed）
固定定位與絕對定位類似，但它是相對於瀏覽器視窗定位，並且不會隨著滾動條進行滾動。
固定定位的最常見的一種用途是在頁面中建立乙個固定頭部、固定腳部或者固定側邊欄，不需使用margin、border、padding。
5、絕對定位vs相對定位
絕對定位好像把不同元素安排到了一棟樓的不同樓層(除首層，文字流放在首層)，它們之間互不影響；相對定位元素在首層，與文字流一起存放，它們之間互相影響。
被設定了絕對定位的元素，在文件流中是不佔據空間的，如果某元素設定了絕對定位，那麼它在文件流中的位置會被刪除，它浮了起來，其實設定了相對定位也會讓元素浮起來，但它們的不同點在於，相對定位不會刪除它本身在文件流中佔據的空間，其他元素不可以佔據該空間，而絕對定位則會刪除掉該元素在文件流中的位置，使其完全從文件流中抽了出來，其他元素可以佔據其空間，可以通過z-index來設定它們的堆疊順序 。
絕對定位的元素脫離了標準文件流，即「脫標」
。「子絕父相」指
絕對定位是相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。
設定父元素相對定位，子元素絕對定位，那麼子元素就是相對於這個父元素的位置來定位的。
css 的幾種定位
css position 定位 position 屬性值的含義 static html 元素的預設值，也就是說沒有定位，遵循正常的文件流物件。靜態定位的元素不會受到 top,bottom,left,right影響。div relative 相對定位元素的定位是相對其自身的位置進行定位。left ri...
css中的幾種定位的區別
這是沒有加任何定位的文件流 1 直接上圖看效果，下面這張圖是給紅色div設定了position absolute 絕對定位，你也看到絕對定位使紅色div脫離了文件流。2 現在給紅色的div 設定相對定位 position relative 從下圖可以看出紅色div並沒有脫離文件流，我們可以給此時的紅...
CSS 的幾種 position 定位
1 static 靜態定位，所有標準文件流中的元素預設值。該關鍵字指定元素使用正常的布局行為，即元素在文件常規流中當前的布局位置。此時 top right bottom left 屬性無效。2 relative 相對定位，上浮但不脫離標準文件流。該關鍵字指定元素會相對於自身標準文件流中的位置進行相應...