定位網頁元素

定位屬性position

static：預設值，沒有定位

relative：相對定位

#third

例：

偏移設定：top(上)、left(左)、right(右)、bottom(下)。偏移位置設定是距離設定方向的邊框的距離(在邊框內是正)

absolute：絕對定位

使用了絕對定位的元素以它最近的乙個「已經定位」的「祖先元素」 為基準進行偏移

如果沒有已經定位的祖先元素，會以瀏覽器視窗為基準進行定位

絕對定位的元素從標準文件流中脫離，這意味著它們對其他元素的定位不會造成影響

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

設定了絕對定位但沒有設定偏移量的元素將保持在原來的位置。

在網頁製作中可以用於需要使某個元素脫離標準流，而仍然希望它保持在原來的位置的情況

fixed：固定定位

類似絕對定位，不過區別在於定位的基準不是祖先元素，而是瀏覽器視窗

相對定位：

相對定位的特性

相對於自己的初始位置來定位

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

層級提高，可以把標準文件流中的元素及浮動元素蓋在下邊

相對定位的使用場景

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

絕對定位：

絕對定位是相對於它的定位父級的位置來定位，如果沒有設定定位父級，則相對瀏覽器視窗來定位

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

層級提高，可以把標準文件流中的元素及浮動元素蓋在下邊

設定絕對定位的元素脫離文件流

絕對定位的使用場景

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

固定定位：

相對瀏覽器視窗來定位

偏移量不會隨滾動條的移動而移動

固定定位的使用場景

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

定位網頁元素

定位網頁元素 一 網頁的定位機制 1.網頁中的三種定位機制 a 標準文件流 b 浮動float c 絕對定位 2.僅用浮動和盒子模型，無法實現特定情況下的複雜定位 a 右上角的關閉按鈕效果 b 固定在右下角的回頂部 c 滑鼠移上去的下拉效果 3.position屬性實現元素的定位 position ...

定位網頁元素

一.定位網頁元素 position 1.static 預設值，代表沒有定位，元素沒有定位會以標準文件流方式展現出來 2.relative 相對定位，元素以自身原來位置進行定位 如果設定元素浮動，那麼會以浮動後的位置作為原來的位置 規律 設定相對定位的盒子會相對它原來的位置，通過指定偏移，到達新的位置...

定位網頁元素

一.定位網頁元素 position 1.static 預設值，代表沒有定位，元素沒有定位會以標準文件流方式展現出來 2.relative 相對定位，元素以自身原來位置進行定位 如果設定元素浮動，那麼會以浮動後的位置作為原來的位置 規律 設定相對定位的盒子會相對它原來的位置，通過指定偏移，到達新的位置...