绝对位置元素在静态父级中的行为如何 [英] How exactly does absolute position element behaves inside a static parent
问题描述
我问这个问题是因为昨天我必须设置几个div，因为它显示在这个 JSFiddle示例中。
对我来说，棘手的部分是将< div id =content-container> < div id =vertical-menu> 但保持顶端对齐。此外，我希望< div id =content-container> 的边框超出它的父div。所以经过一些研究（我是CSS初学者）后，我发现绝对定位可能是我所有问题的答案。所以的确如你所见，我在< div id =content-container> position：absolute
然而，从我读到的有关绝对值定位我留下的印象是，我需要一个父母相对定位，如果没有找到，我最终会得到< html> 作为我的父元素，对于我来说意味着具有绝对定位的元素将位于页面的最左上角。但是，如示例所示，即使我的父元素或任何其他元素都具有相对定位，但我仍然在流中获取了元素。
那么究竟发生了什么？为什么在这种情况下，我的绝对定位元素不会超出正常流程？我认为，说它与 static 定位元素进行交互是正确的，因此在绝对定位元素之间是否有类似的行为内部静态和相对父元素。还有，它可能会出现一些意想不到的行为 - 我问这是因为我在真实世界的场景中使用了这种方式，即使当我的父母使用默认的 static 定位，但我不知道这只是一个幸运的巧合，或者只是当绝对元素在静态或相对 parents？
您没有指定任何 无论您的元素是否位于另一个定位元素中，这种情况都会发生，并且是完全的设计;看到我的答案这个问题来自CSS2.1规范的解释。 我在你的小提琴中看到你试图浮动你绝对定位的元素;这是行不通的。一旦你绝对定位一个元素， 它不能浮动 ： 影响框生成和布局的三个属性 - 'display'，'position'和'浮动' - 交互如下： 如果'display'的值为'none'，那么'position'和'float ' 请勿应用。在这种情况下，该元素不会生成框。 删除 还要注意的是，当你绝对定位元素时，它仍然被排除在正常流程之外。如果您试图在 I ask this question because yesterday I had to style several divs as it's shown in this JSFiddle example. The tricky part for me was to position However from what I've read about So what really happening? Why in this case my You did not specify any of This happens regardless of whether your element is in another positioned element or not, and is completely by design; see my answer to this question for an explanation from the CSS2.1 spec. I see in your fiddle you're trying to float your absolutely-positioned element; that will not work. Once you absolutely position an element, it cannot float: The three properties that affect box generation and layout — 'display', 'position', and 'float' — interact as follows: If 'display' has the value 'none', then 'position' and 'float' do not apply. In this case, the element generates no box. Otherwise, if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none', and display is set according to the table below. The position of the box will be determined by the 'top', 'right', 'bottom' and 'left' properties and the box's containing block.
Removing the Note also that when you absolutely position the element it is still taken out of the normal flow. If you tried to add content directly after 这篇关于绝对位置元素在静态父级中的行为如何的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！顶部， bottom ， left 或 right 所以它仍然处于静态位置，并且不会到达任何地方。
位置：绝对导致元素重新定位，因为它现在是浮动的（它实际上是被＃vertical-menu 推下，因为没有足够的空间），并且一旦你将 float：left 声明移除那么，它会返回到其通常的静态位置。
< div id =content-container> ...< / div> 之后直接添加内容，您会看到额外的内容出现在同一个地点而不是被推下。<div id="content-container"> right from the <div id="vertical-menu"> but keep them top-aligned. Also I wanted the borders of <div id="content-container"> to go outside it's parent div. So after some research (I'm CSS beginner) I found out that absolute positioning may be the answer for all my questions. So indeed, as you may see I added position: absolute to my <div id="content-container"> and along with the other styling I got what I want.absolute positioning I left with the impression that I need a parent with relative positioning and if such is not found I'll end up with <html> as my parent element which for me means that the element with the absolute positioning will be positioned at the very top-left of the page. But as the example shows, even though my parent element, nor any other element has relative positioning I still get my element in the flow.absolute positioned element doesn't get outside the normal flow? I think, it's correct to say that it's interacting with static positioned element so is there any similar behavior between absolute positioned elements inside static and relative parent elements. And also - could it be there some unexpected behavior - I ask this because I use this in my real world scenario and I'm satisfied with the result even when my parent is with the default static positioning but I wonder if this is just e lucky coincidence or just the absolute elements behave similar when they are inside either static or relative parents?top, bottom, left or right for your absolutely positioned element, so it remains in the static position and doesn't go anywhere.
position: absolute declaration alone will cause your element to reposition itself because it's now floating (it's actually being pushed down by #vertical-menu because there's not enough room), and once you remove the float: left declaration as well, it returns to its usual, static position.<div id="content-container">...</div> you'll see that extra content appearing in the same spot instead of being pushed down.
