绝对定位与百分比给人意想不到的效果

请考虑this 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 positioning props我期望#item有其左侧值为“包含块”的50％：#container。但是，它似乎占整个页面的50％，而不仅仅是containing block。更令人惊讶的是：如果我告诉容器的溢出物保持隐藏状态，“测试”仍然存在。

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

来源

2012-02-22 Jeroen

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

参见：W3C - 10.1 - Definition of "containing block"

来源

2012-02-22 23:04:48 animuson

-2

当给你把它拿出来的文件的正常流动的元素绝对位置。无论页面中的其他元素如何，绝对都是屏幕的左上角部分。所以通过说左边：50％你说从屏幕的绝对左边进入半途。

来源

2012-02-22 23:06:11 thepriebe

这就是'position：fixed'，它总是使用整页容器。绝对定位适用于其父元素，请参阅我的答案。 – animuson 2012-02-22 23:08:11

太过真实。我完全同意。谢谢。 – thepriebe 2012-02-22 23:15:16

添加

position:relative;

到div容器。

来源

2012-02-22 23:06:20

绝对定位与百分比给人意想不到的效果

回答

相关问题