站長資訊網css有4種定位方式，分別為靜態定位（static）、相對定位（relative）、絕對定位（absolute）和固定定位（fixed）；定位有不同的參數，例如left、right、top、bottom、z-index等。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
CSS中的定位使用來布局的熟練應用對頁面美化有很好的幫助，css有4種定位方式，分別為：靜態定位，相對定位，絕對定位，固定定位，定位有不同的參數，例如：left、right、top、bottom、z-index等。
1、靜態定位（static）
一般的標簽元素不加任何定位屬性都屬于靜態定位，在頁面的最底層屬于標準流。
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）。
<head> <style type="text/css"> .box { background: red; width: 100px; height: 100px; float: left; margin: 5px; } .two { position: absolute; top: 50px; left: 50px; } </style> </head> <body> <div class="box" >One</div> <div class="box two" >Two</div> <div class="box" >Three</div> <div class="box">Four</div> </body>
將class="two"的p定位到距離<body>的頂部和左側分別50px的位置。會改變其他元素的布局，不會在此元素本來位置留下空白。
（學習視頻分享：css視頻教程）
3、相對定位（relative）
相對定位元素不可層疊，依據left、right、top、bottom等屬性在正常文檔流中偏移自身位置。同樣可以用z-index分層設計。
<head> <style type="text/css"> .box { background: red; width: 100px; height: 100px; float: left; margin: 5px; } .two { position: relative; top: 50px; left: 50px; } </style> </head> <body> <div class="box" >One</div> <div class="box two" >Two</div> <div class="box" >Three</div> <div class="box">Four</div> </body>
將class="two"的p定位到距離它本來位置的頂部和左側分別50px的位置。不會改變其他元素的布局，會在此元素本來位置留下空白。
4、固定定位（fixed）
固定定位與絕對定位類似，但它是相對于瀏覽器窗口定位，并且不會隨著滾動條進行滾動。
固定定位的最常見的一種用途是在頁面中創建一個固定頭部、固定腳部或者固定側邊欄，不需使用margin、border、padding。
5、絕對定位vs相對定位
絕對定位好像把不同元素安排到了一棟樓的不同樓層(除首層，文本流放在首層)，它們之間互不影響；相對定位元素在首層，與文本流一起存放，它們之間互相影響。
被設置了絕對定位的元素，在文檔流中是不占據空間的，如果某元素設置了絕對定位，那么它在文檔流中的位置會被刪除，它浮了起來，其實設置了相對定位也會讓元素浮起來，但它們的不同點在于，相對定位不會刪除它本身在文檔流中占據的空間，其他元素不可以占據該空間，而絕對定位則會刪除掉該元素在文檔流中的位置，使其完全從文檔流中抽了出來，其他元素可以占據其空間，可以通過z-index來設置它們的堆疊順序 。
