绝对定位元素在静态父元素内的行为是怎样的？

Question

绝对定位元素在静态父元素内的行为是怎样的？

4

我问这个问题是因为昨天我需要像这个 JSFiddle示例中展示的那样样式化几个div。

对我来说棘手的部分是将<div id="content-container">定位在<div id="vertical-menu">右侧，但保持它们顶部对齐。此外，我希望<div id="content-container">的边框超出其父div。因此，在一些研究之后（我是CSS初学者），我发现绝对定位可能是我所有问题的答案。因此，正如您所看到的，我向我的<div id="content-container">添加了position: absolute，并且随着其他样式一起使用，我得到了我想要的结果。

然而，从我所读关于absolute定位的内容来看，我留下了一个印象，即我需要具有相对定位的父元素，如果找不到这样的元素，我最终会以<html>作为我的父元素，这意味着具有absolute定位的元素将被定位在页面的左上角。但是，正如示例所示，即使我的父元素或任何其他元素都没有relative positioning，我仍然可以在流程中获得我的元素。

那么实际发生了什么？为什么在这种情况下我的absolute定位元素不会超出正常流程？我认为，可以说它正在与static定位元素交互，因此是否存在static和relative父元素中的absolute定位元素之间的类似行为。还有 - 是否可能存在一些意外的行为 - 我问这个问题是因为我在我的真实世界场景中使用它，并且即使我的父级具有默认的static定位，我对结果感到满意，但我想知道这只是一个幸运的巧合还是绝对元素在它们在static或relative父级内时表现相似？

- Leron

在这种情况下不应使用绝对定位。 - Patryk Ziemkowski

也许吧。正如我所说，这只是我作为CSS初学者研究的结果。你认为有更好的方法，特别是当我需要跳出给我带来最大困扰的父级div时，该怎么办？ - Leron

我不确定你想达到什么目的，但你可以使用负边距将某些内容移出其初始位置。 http://jsfiddle.net/ziemniak1990/tpRf9/ - Patryk Ziemkowski

细节小点。如果一个绝对定位的元素没有定位祖先，它的top、left、bottom、right属性相对于“初始包含块”而不是“html”元素。这对于bottom很重要（默认情况下，初始包含块的高度与html元素的高度不同），如果html元素的位置或宽度从其默认值改变，则对其他属性也很重要。（后一种情况并不经常发生，但确实可以做到。） - Alohci

2个回答

4

CSS `position`

position: static是默认值，按照它们的display属性顺序一个接一个地放置元素。手动为元素设置静态位置没有太多实际用途。
position: relative工作原理与static类似，但相对定位父元素内部的元素其top、left、bottom和right值相对于第一个非static父元素。可以通过JavaScript获取元素的偏移位置或使用CSS或JavaScript设置它们来查看这一点。
position: absolute使元素相对于<html>或第一个相对或绝对定位的父元素放置。这意味着它的位置应该使用从第一个相对或绝对祖先元素开始计数的top, left, bottom, rightCSS属性来设置。

你的错误是没有为<div>设置top或leftCSS属性。希望这个小解释能帮到你！祝好运。

- gchiconi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BoltClock · Accepted Answer

您没有为绝对定位的元素指定top、bottom、left或right中的任何一个，因此它仍然处于静态位置，不会移动到任何地方。

这种情况发生在您的元素是否在另一个定位元素中都是一样的，这完全是设计上的考虑；请参见我在this question中的答案，了解CSS2.1规范的解释。

我在您的fiddle中看到您正在尝试浮动您的绝对定位元素；那是行不通的。一旦您绝对定位一个元素，它就不能浮动：

影响盒子生成和布局的三个属性——“display”、“position”和“float”——相互作用如下：

1. 如果“display”的值为“none”，则“position”和“float”无效。在这种情况下，元素不会生成盒子。

2. 否则，如果“position”的值为“absolute”或“fixed”，则该盒子是绝对定位的，“float”的计算值为“none”，并根据下表设置“display”。该盒子的位置将由“top”、“right”、“bottom”和“left”属性以及包含块确定。

删除仅有的position: absolute声明将会使您的元素重新定位，因为它现在是浮动的（实际上被#vertical-menu推下来了，因为没有足够的空间），一旦您也删除了float: left声明，它就回到了通常的静态位置。

请注意，当您绝对定位该元素时，它仍然不在正常流中。如果您尝试直接在<div id="content-container">...</div>之后添加内容，您会看到额外内容出现在同一位置，而不是被推下去。

绝对定位元素在静态父元素内的行为是怎样的？

CSS position

CSS `position`