第八章 left 發生 頂部 元素定位 tom 定位 左右 基準

一.position屬性定位網頁元素 1.static ：默認值，沒有定位。按照標準文檔流的方式提現出來 2.relative：相對定位，相對於自身元素原來的位置進行定位 <style type="text/css">
.div01{
position: relative;
top: -20px;
left: 20px;
} </style> 註意：當top的值為正值時向下移動
當為負值時向上移動
當left的值為正值時向右移動
當為負值時向左移動 相對定位的規律：
1.設置相對定位的盒子會相對它原來的位置，通過指定偏移，到達新的位置
2.設置相對定位的盒子仍在標準文檔流中，它對父級盒子和相鄰的盒子都沒有任何影響
3.設置相對定位的盒子原來的位置會被保留下來 3.absolute:絕對定位 絕對定位的規律：
1.使用了絕對定位的元素以它最近的一個“已經定位”的“祖先元素” 為基準進行偏移
2.如果沒有已經定位的祖先元素，會以瀏覽器窗口為基準進行定位
3.絕對定位的元素從標準文檔流中脫離，這意味著它們對其他元素的定位不會造成影響
4.元素位置發生偏移後，它原來的位置不會被保留下來
<style type="text/css">
.father{
position: relative;
}
.div02{
position: absolute;
left: 20px;
}
</style> 4.fixed:固定定位：以瀏覽器為基準進行固定定位
<style type="text/css">
.div02{
position: fixed;
bottom: 0px;
right: 0px;
}
</style>
類似絕對定位，不過區別在於定位的基準不是祖先元素，而是瀏覽器窗口
5.定位總結：
5.1 相對定位的特性
相對於自己的初始位置來定位
元素位置發生偏移後，它原來的位置會被保留下來
層級提高，可以把標準文檔流中的元素及浮動元素蓋在下邊
5.2 相對定位的使用場景
相對定位一般情況下很少自己單獨使用，都是配合絕對定位使用，為絕對定位創造定位父級而又不設置偏移量 5.3 絕對定位的特性
絕對定位是相對於它的定位父級的位置來定位，如果沒有設置定位父級，則相對瀏覽器窗口來定位
元素位置發生偏移後，原來的位置不會被保留
層級提高，可以把標準文檔流中的元素及浮動元素蓋在下邊
設置絕對定位的元素脫離文檔流
5.4 絕對定位的使用場景
一般情況下，絕對定位用在下拉菜單、焦點圖輪播、彈出數字氣泡、特別花邊等場景 5.5 固定定位的特性
相對瀏覽器窗口來定位
偏移量不會隨滾動條的移動而移動
5.6 固定定位的使用場景
一般在網頁中被用在窗口左右兩邊的固定廣告、返回頂部圖標、吸頂導航欄等 二.z-index：調整元素定位時重疊層的上下位置 z-index屬性值：整數，默認值為0
設置了positon屬性時，z-index屬性可以設置各元素之間的重疊高低關系
z-index值大的層位於其值小的層上方 1.設置透明度
opacity:x x值為0~1，值越小越透明 opacity:0.4;
filter:alpha(opacity=x) x值為0~100，值越小越透明 filter:alpha(opacity=40);

第八章 定位網頁元素