html - 为什么这个内部 div 显示在外部 div 下方？

Question

我有两个 div，一个内部和一个外部，但是内部 div 呈现在外部 div 下方。这是我的简化标记:

<div id="outer" style="position: relative;">
    Outer

    <div id="inner" style="position: absolute; right: 0;">
        Inner
    </div>

</div>

我可以在 Firebug 中确认内部 div 呈现在下方(在外部 div 之外)。显然我假设页面上有其他一些样式可能会导致这种情况，但我一直没能找到它。什么会导致这种行为？有趣的是，当我从内部 div 中删除 position: absolute; 样式时，这种行为就消失了......但当然我没有得到我想要的定位案例。

我在这里想要的是内部 div 显示在文本“Outer”下方，但仍在外部 div 内。我想与#outer 的右侧对齐。

#outer 中还有另一个 div，其中文本“Outer”向左对齐 (position: absolute; left: 0;)。我没有在最初的问题中提到这一点，因为它似乎与我观察到的行为没有直接关系。两个具有绝对定位的内部 div 都显示在#outer 的下方和外侧。

编辑:我真正想要的是一个带有两个内部列的外部容器:一个在左边，一个在右边。 float 似乎会导致其他问题，所以我希望相对+绝对定位能够解决这个问题。

Answer 1

您的问题不在于绝对位置。事实上，内部 div 将以外部 div 的顶部和左侧作为根坐标，问题在于当未设置宽度/高度属性时如何呈现 div( block 元素)，检查下面的内容将回答您的问题。 :)

<div id="outer" style="position: relative; background-color: #f1af1f; width: 100px;">
    Outer
    <div id="inner" style="position: absolute; top: 0; right: 0;">
        Inner
    </div>
</div>

编辑:我更新了上面的代码，你可以在你的浏览器中运行它，你会看到下面的内容(我将尝试解释浏览器如何理解它)。一个黄色矩形，左侧为文本“Outer”，右侧为“Inner”，位于同一行。矩形宽度为 100px。现在浏览器如何理解上面的代码。

First the browser parses the html into DOM Tree, so you can this structure (simplified)
body ->
  div#outer -> // position relative, yellow background, 100px in width, auto-height
    div#inner -> // position absolute, top offset 0 units, right offset 0 units.

现在浏览器在浏览器窗口的左上角呈现 div#outer，宽度为 100px，根据用于显示字符串“Outer”的字体自动计算高度。然后它移动到它的 child (div#inner)。它看到它的绝对定位与顶部和右侧。现在浏览器知道 div#outer 是相对定位的，所以它将 div#inner 的 (top,left) 坐标设置为从 div#outer 的 (top,left) 坐标开始。一旦测量出来，浏览器就知道如何设置顶部和右侧。在我们的例子中，div#outer 的边界是(上、左、右、下):0、0、100、X(取决于 div#outer 内容高度)。所以 div#inner 的位置是从 div#outer top border 到 bottom 和从它的右边界到左边界(取决于内容)。

现在，这里要提一个。如果您的 div#inner 中有更多内容，那么内部的 div#outer 的高度/宽度将重叠并超出 div#outer 的边界。您可以通过添加以下内容来解决此问题: overflow: hidden;到 div#outer。

希望这能让事情更清楚。

注意:我跳过了有关浏览器如何处理绝对位置的详细信息。