我问这个问题,因为昨天我必须设置几个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定位元素进行交互是正确的,所以在absolute内部元素static和relative父元素之间存在任何类似的行为.而且 - 它可能会有一些意想不到的行为 - 我问这个因为我在我的真实世界场景中使用它并且我对结果感到满意,即使我的父母使用默认static定位但是我想知道这是否只是幸运的巧合或者只是绝对元素在内部static或relative父母内部时表现相似？
你没有指定任何的top,bottom,left或right为您的绝对定位的元素,所以它仍然在静态位置,并没有去任何地方.
无论您的元素是否位于另一个定位元素中,都会发生这种情况,并且完全是设计上的; 请参阅我对这个问题的回答,以获得CSS2.1规范的解释.
我在你的小提琴里看到你试图漂浮你绝对定位的元素; 那样不行.绝对定位元素后,它就不能浮动:
影响框生成和布局的三个属性 - 'display','position'和'float' - 交互如下:
如果'display'的值为'none',则'position'和'float'不适用.在这种情况下,元素不生成框.
否则,如果'position'的值为'absolute'或'fixed',则该框绝对定位,'float'的计算值为'none',并根据下表设置显示.框的位置将由"顶部","右侧","底部"和"左侧"属性以及框的包含块确定.
position: absolute单独删除声明会导致你的元素重新定位,因为它现在是浮动的(它实际上是#vertical-menu由于没有足够的空间而被推下),并且一旦你删除了float: left声明,它就会返回到它通常的静态位置.
另请注意,当您绝对定位元素时,它仍然会从正常流程中取出.如果您尝试在<div id="content-container">...</div>看到额外内容出现在同一位置而不是被按下之后直接添加内容.