理解CSS相對定位和固定定位

定義

可能理解起來最簡單的定位機制就是相對定位了。採用這種機制時，通過使用偏移屬性移動定位元素。當元素相對定位時，它會從其正常位置移走，不過，原來所佔的空間並不會因此消失。相對定位元素，會為其所有子元素建立乙個新的包含塊。這個包含塊對應於該元素原本所在的位置

[注意]如果相對定位元素遇到過度受限的問題，乙個值會重置為另乙個值的相反數。bottom總是等於-top，right總是等於-left

百分比

特性

限制範圍

一般地，給絕對定位元素限制範圍時，為其父級元素設定相對定位relative，因為相對定位元素不脫離文件流

[注意]相對定位元素可以限制絕對定位，但不能限制固定定位，因為固定定位是相對於視窗定位的

提公升層級

當想要提公升元素層級，又不想脫離文件流時，使用相對定位是乙個好主意

行內元素

ie相容

在ie6瀏覽器下，haslayout下的元素負margin超出父元素的部分會被隱藏掉。這個問題可以通過設定margin負值元素的position屬性值為relative來解決。

固定定位與絕對定位很類似，元素會完全從文件流中去除，但固定元素的偏移是相對於視窗。

[注意]ie6-瀏覽器不支援

特性

全屏遮罩

當頁面內容超出頁面容器大小出現滾動條時，此時使用absolute全屏遮罩會出現滾動條以外部分沒有遮住的情況。因為根元素html的父級是document，document的高度和可視區域一致，也就是與視窗一致，是不包括滾動條以外部分的。

這時，只能使用fixed固定定位來實現全屏遮罩效果

.page.test

<
div 
class
="page"
id="page"
>
div>
<
div 
class
="test"
>
div>
<
button
>absolute
button
>
<
button
>fixed
button
>

var btns = document.getelementsbytagname('button');
for(var i = 0; i < btns.length; i++)
}

//分別點選兩個按鈕，並拖動橫向滾動條檢視效果

【transform】

如果設定fixed元素的父級或祖先級元素設定為transform屬性，則fixed相對於該元素定位。因為設定transform屬性的元素建立了乙個新的座標系

如果要通過fixed實現鋪滿全屏的效果，一定要注意其父級或祖先級元素不能設定有transform屬性