绝对位置元素在静态父级中的行为到底是如何的？
我问这个问题是因为昨天我不得不对几个div进行样式设计，如这 JSFiddle示例中所示。
对我来说，棘手的部分是定位<div id="content-container">从<div id="vertical-menu">的权利，但保持他们的顶部对齐。此外，我还希望<div id="content-container">的边界在它的父div之外。因此，经过一些研究(我是CSS初学者)，我发现绝对定位可能是我所有问题的答案。事实上，正如您可能看到的那样，我将position: absolute添加到我的<div id="content-container">中，并与其他样式一起得到了我想要的。
然而，从我所读到的关于absolute定位的文章中，我留下的印象是，我需要一个具有relative定位的父元素，如果找不到这种位置，我将以<html>作为我的父元素，这对我来说意味着具有absolute定位的元素将定位在页面的最左上方。但是，正如示例所示，即使我的父元素和任何其他元素都有relative positioning，但我仍然在流中获取元素。
那么到底发生了什么？为什么在这种情况下，我的absolute定位元素不在正常流之外？我认为，正确的说法是它与static定位元素交互，因此在static和relative父元素中的absolute定位元素之间是否存在类似的行为。而且--它是否有一些意想不到的行为--我问这个问题，是因为我在现实世界中使用了这个，我对结果很满意，即使我的父母是默认的static位置，但我不知道这是一个幸运的巧合，还是仅仅是绝对元素在static或relative父母中的行为类似呢？
Stack Overflow用户
发布于 2013-11-17 17:50:46
您没有为绝对定位的元素指定任何top、bottom、left或right，因此它保持在静态位置，并且不会去任何地方。
无论您的元素是否位于另一个定位元素中，都会发生这种情况，并且完全是按设计进行的；有关CSS2.1规范的解释，请参阅我对这个问题的回答。
我在你的小提琴上看到，你想让你的绝对定位的元素浮起来，那是行不通的。一旦您确定了一个元素的位置，http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo
影响框生成和布局的三个属性--“显示”、“位置”和“浮点”--相互作用如下：
- 如果“display”的值为“none”，则“position”和“float”不适用。在这种情况下，元素不会生成任何框。
- 否则，如果“”的值为“绝对”或“固定”，则该框绝对定位，“浮点数”的计算值为“none”，并根据下表设置显示。盒子的位置将由‘顶部’，‘右’，‘底部’和‘左’属性和盒子的包含块决定。
仅删除position: absolute声明就会使您的元素重新定位，因为它现在是浮动的(实际上是被#vertical-menu按下了，因为空间不够)，一旦您也删除了float: left声明，它返回到通常的静态位置。。
还请注意，当您绝对定位元素时，它仍然被从正常流中取出。如果您试图在<div id="content-container">...</div>之后直接添加内容，您将看到在同一地点出现的额外内容而不是被推下去。
https://stackoverflow.com/questions/20033949
复制相似问题
腾讯云开发者
