css相對定位與絕對定位

逆戰班

通常情況下，我們用css定位來解決容器疊加排列的問題，而用浮動解決左右排列的問題。

position屬性的值主要有static，relative，absolute，fixed和sticky這幾種，position屬性的預設值為static，也就是沒有定位，元素在正常的文件流中，這時候給元素加偏移量（left，right，top，bottom）是不會生效的。

包括z-index也不會生效。

不給元素宣告position屬性，和position屬性值為static時效果一樣。

相對定位

接下來說到relative值，relative值表示相對定位，當元素定位為relative時，如果不額外定義偏移量，那麼relative不會產生效果，當relative設定偏移量以後，這個元素會相對於它本來位置的起始點移動。並且它本來的空間也會得到保留。對後面的元素不會產生影響。

此時我們發現，給藍色的塊新增定位以後，它相對於原來所佔據的位置進行了偏移，但是它原來所佔據的地方還是得到了保留，不會被後面綠色的塊填補掉。

因此給元素新增相對定位不會影響後面其他元素的布局。

同時需要注意的是，即使它偏移後的位置佔據了其他元素的空間，也不會把其他元素從本來的位置擠開，而是會覆蓋到其他元素的上面。

此時又涉及到了權重，z-index。

我們可以通過調整不同元素的權重，決定他們的重疊順序。z-index預設權重為0.設定值為整數，也可以為負數。如：1，-10，100等。

絕對定位

絕對定位值為position：absolute

與相對定位不同的是，絕對定位會使元素脫離文件流，這一點與float屬性有點相似。

當乙個元素設定了絕對定位後，該元素會相對於設定了定位的上層元素進行定位。優先父元素。如果父元素沒有設定定位，那麼會繼續向上尋找最近的上層元素進行定位。如果所有的上層元素都沒有進行定位，那麼會相對於整個頁面進行定位。

如果上層元素有多個都設定了定位，那麼該元素會相對於最近的祖先元素進行定位。

在平時應用中，如果父元素沒有進行定位，我們通常會利用前面講到的相對定位的特點，即只給父元素進行相對定位position：relative；而不設定偏移量，從而方便我們對該元素進行定位。

這時讓我們回到上面的例子，我們先給三個塊的父元素設定相對定位，再給藍色的塊設定絕對定位並偏移同樣的距離，那麼會發生什麼樣的變化呢？

我們發現藍色塊還是移動到了同樣的位置，但是後面的綠色的塊卻沒有停留在原來的位置，而是填補了藍色塊原來的位置。

除了剛才說到的這些特點，絕對定位還會使被定義的內聯元素支援設定寬高（塊元素的特性），使被定義的塊元素的寬根據內容決定（內聯元素的特性）。這幾點在平時的應用中要特別注意。

注意：

偏移量的單位還可以是百分比，當寫成百分比時，意義為移動距離為相對于父容器大小百分比的偏移量。在網頁中常和margin-left配合使用來實現元素的居中效果。