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之外）。显然我假设页面上还有其他一些可能导致这种情况的风格，但我一直无法找到它。什么可能导致这种行为？有趣的是，当我从内部position: absolute;中删除div样式时，此行为消失了......但当然在这种情况下我无法得到我想要的定位。

我想要的是内部div出现在文本“Outer”下面，但仍在外部div内。我希望与#outer的右侧对齐。

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

编辑：我真正想要的是一个带有两个内部列的外部容器：一个在左边，一个在右边。浮动似乎会引起其他问题，所以我希望相对+绝对定位可以解决这个问题。

Answer 1

你的问题不是绝对的位置。事实上，内部div将以外部div的顶部，左边作为根坐标，问题在于如何在没有设置宽度/高度属性时渲染div（块元素），请检查下面它将回答您的问题。：）

<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”的字体自动计算高度。然后它移动到它的孩子（div＃inner）。它看到它的绝对顶部和右侧。现在浏览器知道div＃outer相对定位所以它设置div＃inner的（上，左）坐标从div＃outer的（top，left）坐标开始。一旦测量完毕，浏览器就会知道如何设置顶部和右侧。在我们的例子中，div＃outer的边界是（top，left，right，bottom）：0,0,100，X（取决于div＃outer content height）。所以div＃内部位置从div＃outer top border开始到底部，从右边框到左边框（取决于内容）。

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

希望这会让事情更清楚。

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

Answer 2

由于您没有#inner任何top但只有right，因此它会从文本Outer下面的文本outside开始。

顺便说一句{{1}}不是一个真正适用于绝对定位的块的概念。您从文档流中删除它，因此从技术上讲它不在任何内容中。

Answer 3

猜猜：

也许您想添加top: 0;？
文档中是否还有其他带有该ID的元素？
如果您将CSS复制到外部文件，那么它是否有效？

Answer 4

你说“我想要的是内部div出现在文本”Outer“下方，但仍然在外部div中。我想要与#outer的右侧对齐。< / EM>“

<div id="outer" style="float:left;"> Outer <div id="inner" style="float:right; clear:left;"> Inner </div> </div>

这就是我所理解的。

为什么这个内部div显示在外部div之下？

4 个答案: