position

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

static定位

• static屬性值

相對定位

• relative屬性值 –

相對自身原來位置進行偏移

• 偏移設定：top、left、right、bottom

偏移量方向

• left和top正、負取值的方向

相對定位元素的規律

• 設定相對定位的盒子會相對它原來的位置，通過指定偏移，到達 新的位置

• 設定相對定位的盒子仍在標準文件流中，它對父級盒子和相鄰的 盒子都沒有任何影響

• 設定相對定位的盒子原來的位置會被保留下來 浮動元素設定相對定位

• 設定第二個盒子右浮動，再設定第一、第二盒子相對定位

• absolute屬性值 – 偏移設定： left、right、top、bottom

絕對定位小結 • 使用了絕對定位的元素以它最近的一個“已經定位”的“祖先元 素” 為基準進行偏移

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

• 絕對定位的元素從標準文件流中脫離，這意味著它們對其他元素 的定位不會造成影響 n 元素位置發生偏移後，它原來的位置不會被保留 下來

、設定了絕對定位但沒有設定偏移量的元素將保持在原來的位置。 在網頁製作中可以用於需要使某個元素脫離標準流，而仍然希 望它保持在原來的位置的情況

固定定位2-1

• fixed屬性值 – 偏移設定： left、right、top、bottom n 類似絕對定位，不過區別在於定位的基準不是祖 先元素，而是瀏覽器視窗

定位小結3-1

• 相對定位的特性

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

• 相對定位的使用場景

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

定位小結3-2

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

• 絕對定位的使用場景

– 一般情況下，絕對定位用在下拉選單、焦點圖輪播、彈出數 字氣泡

定位小結3-3

• 固定定位的特性

– 相對瀏覽器視窗來定位 – 偏移量不會隨滾動條的移動而移動

• 固定定位的使用場景

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

z-index屬性

• 調整元素定位時重疊層的上下位置

– z-index屬性值：整數，預設值為0

– 設定了positon屬性時，z-index屬性可以設定各元素之間的重 疊高低關係

– z-index值大的層位於其值小的層上方

opacity:x x值為0~1，值越小越透明 opacity:0.4;

filter:alpha(opacity=x) x值為0~100，值越小越透明 filter:alpha(opacity=40

網頁中的元素都含有兩個堆疊層級

– 未設定絕對定位時所處的環境，z-index是0

– 設定絕對定位時所處的堆疊環境，此時層的位置由z-index的 值確定

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