CSS的幾種定位詳解
CSS中的定位使用來佈局的熟練應用對頁面美化有很好的幫助，下面就進行詳細介紹：定位分為靜態定位，相對定位，絕對定位，固定定位這四種，定位有不同的引數，例如：left、right、top、bottom、z-index等。
1、靜態定位（static）
一般的標籤元素不加任何定位屬性都屬於靜態定位，在頁面的最底層屬於標準流。
2、絕對定位（absolute）
絕對定位的元素從文件流中拖出，使用left、right、top、bottom等屬性相對於其最接近的一個最有定位設定的父級元素進行絕對定位，如果元素的父級沒有設定定位屬性，則依據 根元素左上角作為參考進行定位。絕對定位元素可層疊，層疊順序可通過 z-index 屬性控制，z-index值為無單位的整數，大的在上面，可以有負值。
絕對定位的定位方法：如果它的父元素設定了除static之外的定位，比如position:relative或position:absolute及position:fixed，那麼它就會相對於它的父元素來定位，位置通過left , top ,right ,bottom屬性來規定，如果它的父元素沒有設定定位，那麼就得看它父元素的父元素是否有設定定位，如果還是沒有就繼續向更高層的祖先元素類推，總之它的定位就是相對於設定了除static定位之外的定位的第一個祖先元素，如果所有的祖先元素都沒有以上三種定位中的其中一種定位，那麼它就會相對於文件根元素來定位（並非相對於瀏覽器視窗，相對於視窗定位的是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"的div定位到距離<body>的頂部和左側分別50px的位置。會改變其他元素的佈局，不會在此元素本來位置留下空白。
3、相對定位（relative）
當元素的position設定為relative時則開啟了元素的相對定位
相對定位的特點：
1、元素開啟相對定位以後，如果不設定偏移量元素不會發送任何的變化
2、相對定位時參照於元素原來的位置進行定位的
3、相對定位會提升元素的層級，會蓋住文件流的內容
4、相對定位不會使元素脫離文件流
5、相對定位不會改變元素的性質，塊元素還是塊元素，行內元素還是行內元素
<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"的div定位到距離它本來位置的頂部和左側分別50px的位置。不會改變其他元素的佈局，會在此元素本來位置留下空白。
4、固定定位（fixed）
固定定位與絕對定位類似（除了下面說明的不同，其他都一樣），但它是相對於瀏覽器視窗定位，並且不會隨著滾動條進行滾動。
固定定位的最常見的一種用途是在頁面中建立一個固定頭部、固定腳部或者固定側邊欄，不需使用margin、border、padding。
5、絕對定位vs相對定位
絕對定位好像把不同元素安排到了一棟樓的不同樓層(除首層，文字流放在首層)，它們之間互不影響；相對定位元素在首層，與文字流一起存放，它們之間互相影響。
被設定了絕對定位的元素，在文件流中是不佔據空間的，如果某元素設定了絕對定位，那麼它在文件流中的位置會被刪除，它浮了起來，其實設定了相對定位也會讓元素浮起來，但它們的不同點在於，相對定位不會刪除它本身在文件流中佔據的空間，其他元素不可以佔據該空間，而絕對定位則會刪除掉該元素在文件流中的位置，使其完全從文件流中抽了出來，其他元素可以佔據其空間，可以通過z-index來設定它們的堆疊順序 。