javascript - 相对和绝对定位如何与嵌入式 div 一起使用？

Question

我需要在 div 中定位 div，我快疯了。我在网上阅读了很多文档，但我仍然不清楚嵌入 div 时 relative 和 absolute 定位的行为。

有人 came up具有以下内容:

The best way I've found to understand absolute positioning is that position:relative looks "downstream" to child elements and position:absolute looks "upstream" to parent elements. That is, when you tell an HTML element to be absolutely positioned, it's going to look "up" to its parent elements until it finds one that is set to position:relative, and will position itself based on that. If it doesn't find one, it will position itself with respect to the by default.

这对所有浏览器都正确吗？这是一个完整的解释吗？

我的问题是我在多个 div 中嵌入了多个 div。我需要将一些子 div 定位在父级 div 中，精度很高(例如前 33 位，左 9 位)。父级 div 可以嵌入到祖父级 div 中，精度也很高，等等......

如何为所有浏览器解决这个问题？我是否应该创建一个 super relative 父级 div，div 的整个层次结构应该从中定位为 absolute？

编辑

根据目前的答案，我有一个额外的问题:是否必须在每个 div 中显式声明一个 relative 或 absolute 位置才能使定位工作？换句话说，如果一个 div 没有relative 或 absolute 位置，在计算位置时不考虑它？

供记录

以上问题的答案是肯定的。

Answer 1

我发现这样更容易理解:

如果元素是position: relative，那么顶部、底部、左侧、右侧位置的任何样式设置都相对于元素在正常布局流中的位置。所以:

position: relative;
top: 10px;

将元素向下推 10px，低于正常 HTML 布局中的元素。

如果一个元素是position:absolute，那么它是相对于最近的position: relative 或position: absolute 父级定位的> 或相对于 body 元素，如果没有 parent 符合该标准。例如，如果直接父级是 `position: relative' 而子级是:

position: absolute;
top: 10px;
left: 10px;

然后，该对象将被放置在距父级左上角 10px 的右下角。当一个对象是 position: absolute 时，它会从页面布局中移除并且不会影响任何其他对象的布局(除了它自己的子对象)。

举个例子，如果你想在一个容器对象中将三个图像放在另一个之上(也许这样你就可以在幻灯片中循环浏览它们，你可以使用这个 CSS 来实现:

.container {position: relative; height: 100px; width: 133px;}
.container img {position: absolute; top: 0; left: 0;}