本篇文章我們主要給大家說一下css的定位。css的定位是我們以后網頁制作中比較常用的屬性，也是很重要的知識點。了解各個定位的作用以及層級關系對以后的頁面布局至關重要。
css定位主要有四種，靜態定位、相對定位、絕對定位和固定定位。其中靜態定位這個是元素的默認定位方式，不能使用top，bottom，left，right和z-index屬性，其它三種定位可以使用以上幾個屬性。我們這里主要介紹后邊的這三個定位。
1）相對定位
如果想為元素設置層模型中的相對定位，需要設置position:relative;，它還是會占用該元素在文檔中初始的頁面空間，通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置，然后相對於以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。比如我們想要讓一個div元素相對當前位置左移100px，上移100px。
代碼以及頁面顯示效果就如下所示：（div向左和向上偏移了100px）
2）絕對定位
如果想為元素設置層模型中的絕對定位，需要設置position:absolute;，這條語句的作用將元素從文檔流中拖出來,將不占用原來元素的空間，然后使用left、right、top、bottom屬性相對於其最接近的一個具有定位屬性的父級元素進行絕對定位。如果不存在就逐級向上排查，直到相對於body元素，即相對於瀏覽器窗口。
我們做個例子來看一下，我們這里寫兩個div，內部都有2個span元素，span元素我們都使用絕對定位，並設置left和top為50px，第一個div我們設置相對定位，第二div不設置定位。
由上圖我們可以看出，div1使用了相對定位，所以div1內部的span使用絕對定位是相對於div1來定位元素位置的，而div2沒有定位，所以div2內部的span使用絕對定位是相對於瀏覽器body元素來定位元素位置。
3）固定定位
如果想為元素設置層模型中的固定定位，需要設置position:fixed;，直接以瀏覽器窗口作為參考進行定位，它是浮動在頁面中，元素位置不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變瀏覽器窗口的顯示大小，因此固定定位的元素會始終位於瀏覽器窗口內視圖的某個位置，不會受文檔流動影響。比如我們准備一長串的文字，讓文字超出一屏的寬度，設置浮動元素div1的left和top為100px，拖動瀏覽器的滾動條，浮動元素div1的位置不會發生變化。
具體代碼和展示效果如下圖所示：
