绝对定位与百分比给出意想不到的结果

请考虑以下 HTML 和 CSS 片段：

#container {
  border: 1px solid red;
  height: 100px;
  width: 100px;
}

#item {
  border: 1px dashed purple;
  position: absolute;
  left: 50%;
}

<div id="container">
  <div id="item">TEST</div>
</div>

结果令我惊讶。看着W3定位道具 http://www.w3.org/TR/CSS2/visuren.html#position-props我期望的是#item使其左值位于“包含块”的 50%：#container。然而，它似乎占据了整个页面的 50%，而不仅仅是整个页面的 50%。包含块 http://www.w3.org/TR/CSS2/visuren.html#containing-block。更令人惊讶的是：如果我告诉容器的溢出保持隐藏，“TEST”仍然会在那里。

所有主要浏览器（包括 IE9）似乎都表现出相同的行为，所以我的期望可能是不正确的。那么问题是: 规范的哪一部分解释了这种行为（如果有）？

绝对定位是相对于位置不是静态的下一个父元素应用的。就您而言，这就是整页。尝试设置position: relative关于集装箱部门。
请参阅 jsFiddle。 http://jsfiddle.net/YkAPn/4/

See: W3C - 10.1 - “包含块”的定义 http://www.w3.org/TR/CSS2/visudet.html#containing-block-details