本篇文章我們主要給大家說一下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的位置不會發生變化。
具體代碼和展示效果如下圖所示：
對於css的三種定位方式今天就先介紹到這裡，大家在平時可以自己多加練習練習，要能熟練使用定位將元素放到自己想要放的位置，以及想一下都可以運用到哪些地方。
每日金句：凡事不要說「我不會」或「不可能」，因為你根本還沒有去做！喜歡我的文章的小夥伴記得關注一下哦，每天將為你更新最新知識。