第九章： 網頁元素定位Position
position屬性
- static：默認值，沒有定位
- relative：相對定位
- absolute：絕對定位
- fixed：固定定位 （一般不用）
static沒有定位，以標准流方式顯示
relative設置相對定位的盒子會相對它原來的位置，通過指定偏移，到達新的位置。設置相對定位的盒子仍在標准流中，它對父級盒子和相鄰的盒子都沒有任何影響。
設置了position屬性值為relative的網頁元素，無論是在標准流中還是在浮動流中，都不會對它的父級元素和相鄰元素有任何影響，它只針對自身原來的位置進行偏移。
absolute屬性值 偏移設置： left、right、top、bottom
使用了絕對定位的元素以它最近的一個“已經定位”的“祖先元素” 為基准進行偏移。如果沒有已經定位的祖先元素，那么會以瀏覽器窗口為基准進行定位。
絕對定位的元素從標准文檔流中脫離，這意味着它們對其他元素的定位不會造成影響。
z-index屬性
調整元素定位時重疊層的上下位置 z-index屬性值：整數，默認值為0 設置了positon屬性時，z-index屬性可以設置各元素之間的重疊高低關系。 z-index值大的層位於其值小的層上方
網頁中的元素都含有兩個堆疊層級，一個是未設置絕對定位時所處的環境，此時z-index是0；另一個是設置絕對定位時所處的堆疊環境，此時層的位置由z-index的值確定。
改變設置絕對定位和沒有設置絕對定位的層的上下堆疊順序，只需調整絕對定位層的z-index值即可。
使用opacity:x或filter:alpha(opacity=x)方式設定網頁元素的透明度。
練習：
//相對定位 <style type="text/css"> .box1,.box2,.box3{ width:100px; height:50px; border:#000 solid 1px;} .box2{ position:relative; top:20px; left:35px;} </style> <body> <div class="box1">box1</div> <div class="box2">box2</div> <div class="box3">box3</div> </body> //<title>絕對定位</title> <style type="text/css"> .box1,.box2,.box3{ width:100px; height:50px; border:#000 solid 1px;} .box2{ position:absolute; top:20px; left:40px;} </style> <body> <div class="box1">box1</div> <div class="box2">box2</div> <div class="box3">box3</div> </body> //z-index對比 <style type="text/css"> *{ margin:0; padding:0;} .main{ width:200px; height:170px; position:relative; border:#000 solid 2px;} .box1{ width:100px; height:100px; background:#F00; position:absolute; top:20px; left:20px;} .box2{ width:100px; height:100px; background:#0F0; position:absolute; top:40px; left:40px;} .box3{ width:100px; height:100px; background:#00F; position:absolute; top:60px; left:60px;} </style> <body> <div class="main"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> </body> // z-index對比 <style type="text/css"> *{ margin:0; padding:0;} .main{ width:200px; height:170px; position:relative; border:#000 solid 2px;} .box1{ width:100px; height:100px; background:#F00; position:absolute; top:20px; left:20px; z-index:1;} .box2{ width:100px; height:100px; background:#0F0; position:absolute; top:40px; left:40px;} .box3{ width:100px; height:100px; background:#00F; position:absolute; top:60px; left:60px;} </style> <body> <div class="main"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div>
</body>
