元素定位

position屬性：

static：預設值，沒有定位

relative：相對定位

absolute：絕對定位

fixed：固定定位

相對定位：relative屬性值：

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

偏移位置：top、left、right、bottom

相對定位元素的定律

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

設定相對定位的盒子仍在标準文檔流中，它對父級盒子相鄰的盒子都沒有人合影響

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

絕對定位：absoluto屬性：

偏移位置：top、left、right、bottom

絕對定位小結：

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

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

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

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

經驗：

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

在網頁制作中可以用于需要使某個元素脫離标準，而仍然希望它保持在原來的位置

固定定位：fixed屬性值：

偏移量：top、left、right、bottom

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

相對定位的特性：

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

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

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

相對定位使用的場景：

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

固定定位的特性：

相對浏覽器視窗來定位

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

固定定位的使用場景：

一般在網頁中用

z-index屬性

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

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

設定了position屬性時，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值即可