我问这个问题是因为昨天我必须设置几个 div 的样式，如下所示thisJSFiddle 示例。
对我来说最棘手的部分是定位<div id="content-container">就从<div id="vertical-menu">但保持它们顶部对齐。我也想要边界<div id="content-container">走出它的父div。因此，经过一些研究（我是 CSS 初学者），我发现绝对定位可能是我所有问题的答案。所以确实，正如你所看到的，我添加了position: absolute to my <div id="content-container">与其他样式一起我得到了我想要的。
但是从我读到的内容来看absolute定位 我留下的印象是我需要一个父母relative定位，如果没有找到，我最终会得到<html>作为我的父元素，这对我来说意味着带有absolute定位将位于页面的最左上角。但正如示例所示，即使我的父元素或任何其他元素都没有relative positioning我仍然能在其中找到自己的元素。
那么到底发生了什么？为什么在这种情况下我的absolute定位元素不会超出正常流程？我认为，说它正在与static定位元素之间是否有类似的行为absolute内部定位元素static and relative父元素。而且 - 是否会有一些意外的行为 - 我问这个是因为我在现实世界的场景中使用它，即使我的父母使用默认值，我对结果也很满意static定位，但我想知道这是否只是幸运的巧合，或者只是绝对元素在它们位于其中时表现相似static or relative父母？
您没有指定任何top, bottom, left or right对于绝对定位的元素，因此它保持在静态位置并且不会去任何地方。
无论您的元素是否位于另一个定位元素中，这种情况都会发生，并且完全是设计使然；看我的回答这个问题CSS2.1 规范的解释。
我在你的小提琴中看到你试图浮动绝对定位的元素；这是行不通的。一旦你绝对定位了一个元素，它不能漂浮:
影响框生成和布局的三个属性 - 'display'、'position' 和 'float' - 相互作用如下：
-
如果“display”的值为“none”，则“position”和“float”不适用。在这种情况下，该元素不会生成框。
-
否则，如果“position”的值为“absolute”或“fixed”，则框绝对定位，“float”的计算值为“none”，并根据下表设置显示。框的位置将由“top”、“right”、“bottom”和“left”属性以及框的包含块确定。
删除position: absolute仅声明将使你的元素重新定位自己因为它现在是浮动的（实际上是被#vertical-menu因为没有足够的空间），一旦你移除了float: left声明也是如此，它返回到通常的静态位置.
另请注意，当您绝对定位元素时，它仍然会从正常流中取出。如果您尝试在之后直接添加内容<div id="content-container">...</div>你会看到的额外的内容出现在同一位置代替被推倒.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
