HTML5和CSS3開發第八章知識點

suixinCaesar發表於2018-06-26
position屬性
static:預設值,沒有定位
relative:相對定位
absolute:絕對定位

fixed:固定定位

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

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

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

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

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

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

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

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

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

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

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

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

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

相關文章