CSS中的position定位
static：靜態定位。
它是position的默認值，一般不設置position屬性時，元素會按照正常的文檔流進行排列。
relative：相對定位。
relative屬性，我們只要搞清它是相對哪個對象來進行偏移的就ok了，答案是它原本的位置。需要注意的是，相對定位不會脫離文檔流，原來的位置仍然被保留。
我們舉個栗子，設置如下的代碼：
<head><style type="text/css">body{background-color: yellow;}img{width: 300px;height: 400px;}#div1{width: 300px;height: 100px;background-color: red;}</style></head><body><img src="img/houzi.jpg" /><div id="div1"></div></body>復制代碼效果如圖：
這時候我們把img的css代碼設置成這樣：
再來看看效果：
可以看出，圖片在原來位置的基礎上，向右移動了150px，向下移動了200px，并且紅色div元素仍然在它原本的位置上，并沒有因為img元素的移動而產生位置上的變化，這是因為雖然圖片的位置發生了變化，但他原來的位置仍然保留著，沒有脫離文檔流。
absolute：絕對定位。
它是相對不是static的最近一級父元素來進行定位的，如果沒有這樣的元素，那么就相對body元素來進行定位，被定位元素會脫離文檔流，然后我們可以通過left,right,top,bottom來調整元素的位置。
我們可以這樣理解：假設一個div元素，他所有的父級元素屬性都是position：static，也就是所有父級元素都沒有設置position，那么這個div就會相對body元素來進行定位。如果這個div元素存在某一個父級元素設置了除static以外的position，那么這個div就會相對這個父元素來進行定位。
看這段代碼：
<head><style type="text/css">body{background-color: yellow;}#red{width: 400px;height: 400px;background-color: red;}#blue{width: 100px;height: 100px;background-color: blue;position: absolute;right: 100px;top: 100px;}</style></head><body><div id="red"><div id="blue"></div></div></body>復制代碼效果圖：
我們發現藍色div雖然是紅色div的子級元素，卻并沒有在紅色div的內部，而是在加上position：absolute屬性后直接相對body元素定位到了右側。
那么試著在紅色div的CSS內加上position：relative；看看會發生什么。
#red{width: 400px;height: 400px;background-color: red;position: relative;}復制代碼效果圖：
我們發現，當藍色div的父級紅色div內加上position：relative；后，藍色div變成相對于紅色div定位了。
從這里我們可以看出，當一個元素設置了position:absolute屬性之后，而它的父級元素的屬性為position:relative時，它不再是相對于文檔定位，而是相對于父元素定位。最重要的是，父元素設置為position:relative并不會脫離文檔流，也就是說利用給父元素設置position:relative屬性，再將子元素設置為position:absolute就可以在文檔流中實現需要的定位，這是一種常見的方法。
fixed：固定定位。
固定定位是最好理解的，它相對于瀏覽器的窗口進行定位并脫離文檔流，即使拖動滾動條，元素的位置也是不變的，我們使用瀏覽器時一些廣告的效果就是這樣的。
看看代碼：
<head><style type="text/css">body{background-color: yellow;}#div1{width: 400px;height: 10000px;background-color: red;}img{width: 300px;height: 400px;position: fixed;right: 50px;top: 100px;}</style></head><body><div id="div1"></div><img src="img/houzi.jpg" /></body>復制代碼效果圖：
我們拖動滾動條到中間的位置，
猴子圖片仍然在這個位置。
總結：
position：relative； 不脫離文檔流，相對于元素原來的位置進行定位。
position：absolute；脫離文檔流，如果所有的父級元素都沒有position屬性，相對于body定位；如果存在父級元素有position屬性，相對于最近的那個有position屬性的父級元素進行定位。
position：fixed；脫離文檔流，相對于瀏覽器窗口定位。
總結
以上是生活随笔為你收集整理的CSS中的position定位的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 制作centos6的启动光盘boot.i
- 下一篇： CSS 基本样式