我做了一個模擬alert的彈出框，但是不能遮擋住滾動條下的內容，經過不斷地測試發現時是我對position:absolute,position:fixed,width:100%,height:100%;理解有模糊的地方，現在做個測試記錄如下：
<body> <!-- 彈出框--> <dl id="idBox" class="lightbox"> <dt id="idBoxHead"><b>LightBox</b> </dt> <dd> 內容顯示 <br /><br /> <input name="" type="button" value=" 關閉 " id="idBoxCancel" /> <br /><br /> </dd> </dl> <!-- 遮罩層--> <div class="deck"></div> <!-- 內容--> <div class="main"> <input name="" type="button" value=" 打開 " id="idBoxOpen" /> </div> </body>
.main{margin:0 auto; width:900px; height:1000px; border:1px solid #000000;} .deck{display: block;z-index: 1000;top: 0px;left: 0px;position: fixed;height: 100%;width: 100%;opacity: 0.5;background-color: rgb(255, 255, 255);}
上面的Css代碼是能夠實現遮住頁面有滾動條的所有內容，原因是.deck{position: fixed;height:100%;width:100%;}
這里測試的例子瀏覽器窗口width:705px;height:625px;
總結記錄：
1.body{width:auto;}時，實際的width=瀏覽器可視窗口寬度-左margin-右margin，如果margin是負值，相當於705-8-（-10）=705-8+10= 707px;
2.body{width:100%}時，無論左右margin有沒有值，是正值，負值，實際的width=瀏覽器可視窗口寬度+padding-left(body) + padding-right(body)+border-left+border-right,這樣看來body的高度設置為100%時符合一般的塊級元素的寬度計算規則。這個例子是瀏覽器可視窗口寬度705px。如果存在左右滾動條，那么body的寬度只到從瀏覽器左上角至705px的地方，不包含右邊滾動條的寬度。
3.body的高度不管是auto，還是100%,上下margin左右margin有沒有值，是正值，負值，正好是height(.main)+padding-top(body) + padding-bottom(body)+border-top+border-bottom，這樣看來body的高度符合一般的塊級元素的高度計算規則。這個例子是.main的height和上下border加在一起，1000+1+1=1002px，這個高度是把滾動條下的內容也計算在內的.
4.不管一個元素在什么位置，position: fixed是相對於瀏覽器窗口定位的。width:100%,height:100%是瀏覽器可視窗口的寬高。width：10%計算結果是705*0.1 = 71px。
不管滾動條的位置在哪里，也也不管body的margin、padding、border，left，top都是相對於可視窗口的左上角。
5.body的子節點設置為position:absolute;width:100%;height:100%;，他在body{width:auto;height:auto;}時不管body的padding、margin、border設置為任何值，寬高都是瀏覽器的可視窗口寬高。不過它是從body的padding左上角開始計算的，子節點的寬度大於body的寬度，所以它會沖破body的包圍。
6.body{width:100%;height:100%}時子節點{position:absolute;width:1oo%;height:100%;}。不管body的padding、margin、border設置為任何值，寬高都是瀏覽器的可視窗口寬高。不過它是從body的padding左上角開始計算的，子節點的寬度大於body的寬度，所以它會沖破body的包圍。
7.如果body{position:relative},body子節點{position:absolute;width:1oo%;height:100%;}，不管body寬高是auto或者100%，子節點都是從body的padding開始布局，只不過它的高度是body寬高減去相應的border
