開始

position在css中是一個很重要的屬性，一共有static，absolute，relative，fixed這幾個值，具體的區別如下所示

詳解

默認定位（static）

1.在不設置position的情況下，則默認為static，也就是塊按照在文檔流中的布局進行排列，一個塊會占一行，代碼和布局如下所示

2.這時在d3樣式中添加top，left定位，會發現布局沒有任何變化，代碼和布局如下所示

絕對定位（absolute）

脫離文檔流，不會單獨占滿一行，它的方位只會受到top，right，left，bottom的影響。那麽絕對定位下top，right，left，bottom是相對於什麽進行定位呢？有以下兩種情況：

（1）在父元素沒有定位時，是相對於body進行定位的，具體代碼布局如下所示。

（2）父元素進行了定位（absolute，relative，fixed），則是相對於父元素進行定位

相對定位（relative）

1.沒有脫離文檔流，塊會單獨占滿一行，方位只會受到top，right，left，bottom的影響。

2.那麽為什麽與父元素的上邊距是250px呢，因為藍色的框框沒有脫離文檔流，單獨占了一行，因此多了100px，上邊距為250px，我們使用float脫離文檔流，float的用法可以參照w3school上的教程

3.下面我們在父元素上添加定位，發現沒有發生任何變化。

固定定位（fixed）

1.脫離了文檔流，塊不會單獨占滿一行，top，right，left，bottom只會相對於body進行定位。

2.添加父元素的position定位，發現布局沒有任何變化

說明：本文為原創作品，若有參考會在文中提及，如有遺漏，涉及侵權，請聯系本人，將立即修正。

CSS定位(position)