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

Question

请考虑包含此HTML代码的this jsfiddle：

<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 positioning props我希望#item的左边值为“包含块”的50％：#container。但是，它似乎占整个页面的50％，而不仅仅是containing block。更令人惊讶的是：如果我告诉容器的溢出保持隐藏，“TEST”仍将存在。

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

Answer 1

相对于位置不是静态的下一个父元素应用绝对定位。在你的情况下，这是整页。尝试在容器分区上设置position: relative See the jsFiddle.

请参阅： W3C - 10.1 - Definition of "containing block"

Answer 2

添加

position:relative; 

到容器div。

Answer 3

给出元素绝对位置时，请将其从文档的正常流程中取出。绝对是屏幕的左上角部分，与页面中的其他元素无关。所以左边说：50％，你是从屏幕的绝对左边说的一半。