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

Question

请考虑这个 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 定位道具，我希望 #item 的左值位于“包含块”的 50%： #container 。但是，它似乎占整个页面的 50%，而不仅仅是 包含块。更令人惊讶的是：如果我告诉容器的溢出保持隐藏，“测试”仍然会在那里。

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

原文由 Jeroen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

请参阅 jsFiddle。

请参阅： W3C - 10.1 - “包含块”的定义

原文由 animuson 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

添加

position:relative;

到容器 div 。

原文由 mohsen dorparasti 发布，翻译遵循 CC BY-SA 3.0 许可协议