百分比的绝对定位会产生意想不到的结果

Question

请考虑这个jsfiddle,包含这个HTML代码:

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

还有一些CSS:

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

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

结果让我感到惊讶.纵观W3定位的道具,我期望的#item要在"包含块"的50%,有它的价值左:中#container.但是,它似乎占整个页面的50%,而不仅仅是包含块.更令人惊讶的是:如果我告诉容器的溢出保持隐藏,"TEST"仍将存在.

所有主流浏览器(包括IE9)似乎都表现出相同的行为,因此我的期望可能不正确.那么问题是:规范的哪一部分解释了这种行为,如果有的话？

Answer 1

相对于位置不是静态的下一个父元素应用绝对定位.在你的情况下,这是整页.尝试设置position: relative容器分区.
看到j​​sFiddle.

参见: W3C - 10.1 - "包含块"的定义