淺談css中的定位技術
對於css中的定位，自己一直沒搞清楚，相信很多初學者剛開始也是犯糊塗，一會絕對定位，一會相對定位，很容易搞混，在實際開發中到底應該怎麼使用呢？接下來我們就仔細的談談css中的幾種定位，希望大家能夠區分開來
Css中的定位主要分爲以下幾種：
Static
默認的屬性，如果你不設置position屬性，則其默認爲該屬性，這個屬性沒啥說的，就是文檔元素從左到右，從上到下顯示即可。
Absolute
你可以理解爲絕對定位，但是它是相對於父級容器的絕對定位。
那麼什麼叫絕對定位呢？就是一旦指定位置，元素就是固定的，位置不會改變。
下面我們來看個例子。
代碼清單1-1
<body>
<div id="fuji" style="position:absolute;top:100px;left:100px;background-color:black;width:500px;height:500px;">
<span id="zilei" style="position:absolute;top:100px;left:100;font-size:20px;font-weight:bold;color:red">i work in beijinghuatang complay</span>
</div>
</body>
在這裏我們可以看到，<span>元素是<div>元素的子元素，我們設置div元素的定位爲absolute，top和left值爲100px，背景顏色爲黑色，寬度和高度爲500px，span元素的定位也爲absolute，top和left也爲100px，字體大小爲20px，加粗字體，字體顏色爲紅色，顯示效果如下：
可以看到div元素相當於他的父元素（body）元素的位置1點偏移了500px,而span元素相當於他的父元素（div）元素偏移了100px，那麼現在我們想來看下分別向body元素和div元素中添加塊級元素（div），看我們的元素位置是否發生變化
代碼清單1-2
<body style="font-weight:bold;color:red">
body元素
<div style="font-weight:bold;color:red;width:200px;height:200px;background-color:blue;">新添加：div1</div>
<div id="fuji" style="position:absolute;top:100px;left:100px;background-color:black;width:500px;height:300px;color:red;font-weight:bold;">
div元素
<div style="font-weight:bold;color:red;width:200px;height:200px;background-color:blue;">新添加：div1</div>
<span id="zilei" style="position:absolute;top:100px;left:100;font-size:20px;font- weight:bold;color:red;border;background-color:white">i work in beijingxxxx complay<br>span元素</span>
</div></body>
在這裏添加了兩個元素，一個是在body元素中，一個是在div元素中，我們可以看到之前絕對定位的div元素和span元素相對於他們的父元素的位置並沒有發生變化。
小結：絕對定位是相對於父元素來說的，只要父元素的位置固定，子類元素的位置就不會發生變化。
Fixed
通俗理解爲固定定位，就是相對於body元素的左上角來說的。位置固定後就不會變化了。
我們將代碼清單1-2的position屬性值設置爲fixed，顯示效果如下：
我們可以看到div和span元素的位置相對於body元素的左上角來說並未發生變化。
Relative
通俗可以理解爲相對定位，相對定位的初始定位是相對它的父級元素來說的，但當添加元素的時候，它的位置是由它的兄弟元素和父元素共同決定的。
我們將代碼清單1-2的position的屬性值改爲relative，瀏覽器顯示如圖：
我們可以看到div元素相對於新添加的元素向下偏移了100px，span元素相對於新添加的div1元素向下偏移了50px。而他們的left屬性的位置都沒有發生變化。
總結：看到這也許你已經看明白了，不過還是建議動手自己試試，這樣才能加深理解和掌握。