遮罩彈窗的實現： <style> body{ height:100%; margin:0;} .shadow{ position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.5; filte ...
對於定位這個性質我原理上來說自己是明白的，但是在實踐的過程中，總會出現各種稀奇古怪的情況，加relative或是absolute就可以解決，但是遇到這些情況總是不明白為什麼！！！難道是腦容量太小的原因嗎！！！=_=!!遮罩彈窗的實現：
還是先記基礎知識好了，因為裡面還是有很多坑！！
相對定位：
內聯元素加相對定位也不支持寬高！！
relative並不會使元素脫離正常文檔流！
以上兩點說明加上相對定位不影響元素本身的特性，內聯元素和塊元素依舊保持原來本身的特性！就是說原來是內聯加上relative以後還是內聯啦！
如果不設置偏移量，相對定位本身並沒有什麼卵用~
所以，相對定位要加偏移量，left/top/bottom/right是相對於該元素原來的位置設置偏移量的哦哦哦~
絕對定位：
內聯元素變得支持寬高啦~如果沒有設置寬度，則內容撐開寬度！！（類似於float，內聯元素加上float以後也支持寬高滴！！）
會使該元素完全脫離文檔流
如果有父級定位則是相對於父級發生偏移，沒有定位父級則是相對於body發生偏移！
也是要搭配偏移量使用啦~
如果直接在body里添加文字和一個<div>標簽，
1. 給<div>設置absolute定位，不設置偏移量，則<div>定位在緊接著文字的下麵
2. 給<div>設置absolute，並且設置偏移量，則<div>是按偏移量相對於body定位
3. 給<div>設置relative，不論是否設置偏移量，都是相對於自己的原來的位置定位。
<style> body{ height:100%; margin:0;} .shadow{ position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.5; filter:alpha(opacity=50);} .filter{ width:300px; height:200px; border:2px solid #000; background:yellow; position:absolute; top:50%; left:50%; margin-left:-152px; margin-top:-102px;} </style> <body> contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br /> contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br /> contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br /> contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br /> contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br /> contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br /> contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br /> contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br /> contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br /> contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br /> contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br /> contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br /> contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br /> contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br /> <div class="shadow"></div> <div class="filter"></div> </body>
這裡陰影部分是相對於body定位的！！！(body>html>文檔)
如果這個彈窗只寫 position:absolute; top:50%; left:50%;則表示左上角那個點是居中的！！！所以這裡要設置margin-top,margin-left為整個元素高、寬的一半！
而且這裡要註意！！！這裡的寬高不是設置的width和height值，而是padding+border+width和padding+border+height的一半！！！！
設置透明度為：opacity:0~1;filter:alpha(opacity=0~100);但是呢，半透明對IE6不相容！打開是一片黑呀~~
這裡還有一個問題，對body要設置height:100%,不然在IE6下遮罩不會占據整個屏幕的~
這裡有個問題，為什麼給shadow設position:relative;以後就看不到整個半透明的遮罩啦？？？！！！
