CSS中的四種定位有哪些區(qū)別

本文將為大家詳細介紹“CSS中的四種定位有哪些區(qū)別”，內(nèi)容步驟清晰詳細，細節(jié)處理妥當，而小編每天都會更新不同的知識點，希望這篇“CSS中的四種定位有哪些區(qū)別”能夠給你意想不到的收獲，請大家跟著小編的思路慢慢深入，具體內(nèi)容如下，一起去收獲新知識吧。

一、普通定位(Static)

在我們的開發(fā)過程中，除非專門指定，否則所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置決定。塊級元素從上到下依次排列，框之間的垂直距離由框的垂直margin計算得到。行內(nèi)元素在一行中水平布置。這個就不過多描述了。

二 . 相對定位（relative）

在我們前端開發(fā)中，relative相對定位一直被看作普通文檔流定位模型的一部分，定位元素的位置相對于它在普通流中的位置進行移動。使用相對定位的元素不管它是否進行移動，元素仍要占據(jù)它原來的位置。移動元素會導(dǎo)致它覆蓋其他的框。

結(jié)果

三 . 絕對定位（absolute）

在前端開發(fā)中，相對于已定位的最近的父類元素，如果沒有已定位的最近的父類元素，那么它的位置就相對于最初的包含塊（如body）。絕對定位的框可以從它的包含塊向上、右、下、左移動。

結(jié)果

四 .固定定位（fixed）

相對于瀏覽器窗口，其余的特點類似于絕對定位。fixed元素就是固定在瀏覽器某個位置的元素，絕對定位是固定在頁面的，如果滾動滾動條的話絕對定位的元素也會滾上去，fixed元素不會。

最后

這幾種定位方式各有千秋，很多小白就經(jīng)常問老李了，我們寫頁面的時候，這4種布局方式應(yīng)該用哪個呢？（這問題一聽就很小白了）

最后給大家說一下吧，在我們現(xiàn)在專業(yè)的前端開發(fā)工作中，用的最多的不是絕對定位，也不是相對定位，而是絕對定位和相對定位的結(jié)合使用。（小白：WTF????合體？？？）

并不是合體出現(xiàn)什么新的定位方法啦。而是我們?nèi)デ岸碎_發(fā)中的一種布局書寫規(guī)范：

父相子絕（即父元素使用相對定位，子元素使用絕對定位，一起結(jié)合實現(xiàn)布局。）

這種布局規(guī)范是現(xiàn)階段前端開發(fā)公認的布局方法，也能避免很多錯誤的出現(xiàn)。 

如果你能讀到這里，小編希望你對“CSS中的四種定位有哪些區(qū)別”這一關(guān)鍵問題有了從實踐層面最深刻的體會，具體使用情況還需要大家自己動手實踐使用過才能領(lǐng)會，如果想閱讀更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道！