为什么没有覆盖整个屏幕宽度？

Question

我使用CSS和JavaScript锁定屏幕，但是我不确定为什么锁定面板的宽度与屏幕宽度不同，您有什么想法吗？ 这是HTML源代码，您可以找到以下javascript代码，有人帮我吗？

JavaScript：

function FreezeScreen(msg) {
    scroll(0,0);
    var outerPane = document.getElementById('FreezePane');
    var innerPane = document.getElementById('InnerFreezePane');
    if (outerPane) outerPane.className = 'FreezePaneOn';
    if (innerPane) innerPane.innerHTML = msg;
}

HTML：

<body>
<div align="center" id="FreezePane" class="FreezePaneOff">
   <div id="InnerFreezePane" class="InnerFreezePane"> </div>
</div>

CSS：

.FreezePaneOff {
  visibility: hidden;
  display: none;
  position: absolute;
  top: -100px;
  left: -100px;
}

.FreezePaneOn {
  position: absolute;
  top: 0px;
  left: 0px;
  visibility: visible;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #666;
  z-index: 999;
  filter:alpha(opacity=85);
  -moz-opacity:0.85;
  padding-top: 20%;
}

.InnerFreezePane {
  text-align: center;
  width: 66%;
  background-color: #171;
  color: White;
  font-size: large;
  border: dashed 2px #111;
  padding: 9px;
}

Answer 1

如果要覆盖屏幕，可以将position:absolute更改为position:fixed

职位属性：

绝对 -相对于其第一个定位（非静态）祖先元素定位的元素。

固定 -元素相对于浏览器窗口定位。

Answer 2

我通过两种方法解决了问题，Method2不好，因为宽度固定，但是我不确定Method1可以为什么，有人向我解释吗？

方法1：

.FreezePaneOn {
  ...
  width: 103%;
  height: 100%;
  ...
}

方法2：

.FreezePaneOn {
  ...
  width: 990px;
  height: 100%;
  ...
}