HTML5和CSS3開發第八章知識點

position屬性
static：預設值，沒有定位
relative：相對定位
absolute：絕對定位

fixed：固定定位

相對定位元素的規律:設定相對定位的盒子會相對它原來的位置，通過指定偏移，到達新的位置
設定相對定位的盒子仍在標準文件流中，它對父級盒子和相鄰的盒子都沒有任何影響

設定相對定位的盒子原來的位置會被保留下來

使用了絕對定位的元素以它最近的一個“已經定位”的“祖先元素” 為基準進行偏移
如果沒有已經定位的祖先元素，會以瀏覽器視窗為基準進行定位
絕對定位的元素從標準文件流中脫離，這意味著它們對其他元素的定位不會造成影響

元素位置發生偏移後，它原來的位置不會被保留下來

相對定位的特性
相對於自己的初始位置來定位
元素位置發生偏移後，它原來的位置會被保留下來
層級提高，可以把標準文件流中的元素及浮動元素蓋在下邊
相對定位的使用場景

相對定位一般情況下很少自己單獨使用，都是配合絕對定位使用，為絕對定位創造定位父級而又不設定偏移量

絕對定位的特性
絕對定位是相對於它的定位父級的位置來定位，如果沒有設定定位父級，則相對瀏覽器視窗來定位
元素位置發生偏移後，原來的位置不會被保留
層級提高，可以把標準文件流中的元素及浮動元素蓋在下邊
設定絕對定位的元素脫離文件流
絕對定位的使用場景

一般情況下，絕對定位用在下拉選單、焦點圖輪播、彈出數字氣泡、特別花邊等場景

固定定位的特性
相對瀏覽器視窗來定位
偏移量不會隨滾動條的移動而移動
固定定位的使用場景

一般在網頁中被用在視窗左右兩邊的固定廣告、返回頂部圖示、吸頂導航欄等

網頁中的元素都含有兩個堆疊層級
未設定絕對定位時所處的環境，z-index是0
設定絕對定位時所處的堆疊環境，此時層的位置由z-index的值確定

改變設定絕對定位和沒有設定絕對定位的層的上下堆疊順序，只需調整絕對定位層的z-index值即可

opacity:x或filter:alpha(opacity=x)方式設定網頁元素的透明度